设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
网站首页
自丢网
社区论坛
自丢网论坛
附件中心
源码下载
邀请码
丢币充值
本版
帖子
自丢网
»
社区论坛
›
建站程序/IT教程
›
Css/Css3教程
›
css实现鼠标放上去更换改变文字内容特效功能代码效果 ...
返回列表
发新帖
css实现鼠标放上去更换改变文字内容特效功能代码效果
[复制链接]
1829
|
0
|
2020-9-17 17:19
|
显示全部楼层
|
阅读模式
css实现鼠标放上去更换改变文字内容特效功能代码效果
css语法代码如下:
.remind span {display:block;margin-top:-22px;}
.remind a:hover {padding-top:22px;}
.remind a {float:left;overflow:hidden;}
.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}
复制代码
html代码如下:
<body>
<ul id="Menu">
<li><a href="#"><span>HOME</span>自丢首页</a></li>
<li><a href="#"><span>NEWS</span>自丢新闻</a></li>
<li><a href="#"><span>ABOUT</span>关于自丢</a></li>
<li><a href="#"><span>CONTACT</span>联系自丢</a></li>
<li><a href="#"><span>照片</span>PHOTO</a></li>
</ul>
</body>
复制代码
完整代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>鼠标经过变换文字</title>
<style>
#Menu {
width: 500px;
margin: 50px auto;
border: 1px solid #CCC;
overflow: hidden;
}
#Menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#Menu li {
width: 100px;
height: 22px;
line-height: 22px;
float: left;
overflow: hidden;
text-align: center;
}
#Menu a {
width: 100px;
float: left;
overflow: hidden;
}
#Menu span {
display: block;
margin-top: -22px;
}
#Menu a:hover {
padding-top: 22px;
}
</style>
</head>
<body>
<ul id="Menu">
<li><a href="#"><span>HOME</span>自丢首页</a></li>
<li><a href="#"><span>NEWS</span>自丢新闻</a></li>
<li><a href="#"><span>ABOUT</span>关于自丢</a></li>
<li><a href="#"><span>CONTACT</span>联系自丢</a></li>
<li><a href="#"><span>照片</span>PHOTO</a></li>
</ul>
</body>
复制代码
css教程
,
css3教程
,
网页特效
相关帖子
•
css教程:倒立三角形 样式代码
•
css合并table表格边框样式代码
•
给大家分享个jquery网页侧边栏在线客服代码
•
jquery右侧固定层QQ在线客服代码附带客户销售技术咨询链接
•
CSS 2.0 中文手册.chm
•
CSS 3.0参考手册.chm
•
css实现鼠标移到div框架内背景颜色发生变化效果代码
•
原生JavaScript点击图片放大功能案例代码
•
css透明度代码
•
bootstrap 小屏幕隐藏代码
•
css中border虚线代码
•
媒体查询css自适应屏幕大小主要分六种
•
css属性光标形状
•
css增加通用阴影鼠标样式和边框特效代码
•
css中引用加载css方法
•
html+css内容超出范围可以手动左右滑动效果代码分享
回复
举报
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
admin
UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16
加好友
发消息
回复楼主
返回列表
源码下载
Thinkphp教程
修罗xiuno教程
Discuz教程
zzz资源/教程
织梦教程
服务器教程
数据库教程
Html/Html5教程
JavaScript教程
Css/Css3教程
建站/web前端教程
PHP教程
其他编程教程
小程序app教程
PPT模板/素材
Word简历模板/素材
Excel模板/素材
素材中心
百科知识
图文推荐
html+js实现本站已运行运营多少天代码
2024-2-8 09:19
2024年最新ThinkPHP8.x 讲义代码SQL,实战部分结合四种前端教程
2024-1-23 09:25
小学生必背古诗75首-标注-翻译-A4可打印word版本下载
2024-1-23 09:18
长截图 截动图gif制作 贴图软件免费下载
2024-1-22 10:45
D盾_防火墙 版本: v2.1.8.1最新绿色免安装版本扫木马病毒
2024-1-22 08:27
热门排行
1
修罗轻论坛程序Xiuno免费开源+收费插件模板风格大全 价值1200元 百度云网盘下载
2
仿看雪论坛模板风格 for 修罗模板 支持4.0以上版本
3
【专业商业版】积分插件 v1.25 for xiuno修罗插件
4
修罗程序添加水印插件 for xiuno插件 支持4.0以上版本
5
邀请注册、用户消费购买邀请码 for 修罗插件 支持xiuno4.0以上版本
6
分类/标签(TAG) - 增强版 v2.5 for xiuno插件 支持4.0以上版本
7
tStore积分商城插件 v1.03 for 修罗插件 xiuno4.0以上版本
8
UMEditor 百度编辑器 v2.6 for 修罗插件xiuno 支持4.0以上版本