繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实例:鼠标滑过文字超级链接背景变色
- CSS样式表
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- CSS解决链接锚点定位偏移的代码
- 一个css transform效果 很有图片的感觉
- ie6,ie7,firefox的textarea滚动条、边框
- 12种CSS BUG解决方法与技巧
- CSS 常用设置备忘
- table中td内容换行问题
- 外部引用CSS中 link与@import的区别
- CSS background-position 属性 定位图片
- css 解决英文字符与阿位伯数字自动换行
- div ,frame等空间的透明实现代码
- CSS中几种浏览器对不同版本的支持与区分写法
- 多个浏览器对容器宽度实际像素的解释
- CSS 用ul li做圆角表格
- CSS 之dl dt dd模拟表格实例代码
- 创建超链接及css 样式设置
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
- css float 解析学习
- 学习DIV+CSS难不难 需要掌握哪些知识
- IE8 CSS hack
CSS样式表 中的 CSS实例:鼠标滑过文字超级链接背景变色
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 154 ::
收藏到网摘: n/a
效果如下图
要实现这个效果。很简单。 定义CSS样式
a:hover{
background:#f29901;
}
这段代码的显示效果如下图
显然，这样太丑了。
只需要再加上一句
a:hover{
background:#f29901;
display:block;
}
即可如效果图所示，当鼠标移动到超链接上的时候，整个li元素背景变色。
可是这样还有一个问题，鼠标必须移动到文字上面才能触发a:hover效果。
如果想要鼠标移动到元素li上的时候，就触发a:hover效果。可以这样写
a {
width:130px;
/*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/
}
a:hover{
background:#f29901;
display:block;
}
下面附上完整例子代码：
html代码：
<ul id="content">
<li><a href="javascript:;">导航菜单1</a></li>
<li><a href="javascript:;">导航菜单2</a></li>
<li><a href="javascript:;">导航菜单3</a></li>
<li><a href="javascript:;">导航菜单4</a></li>
<li><a href="javascript:;">导航菜单5</a></li>
<li><a href="javascript:;">导航菜单6</a></li>
</ul>
css代码：
#content{}
#content li{
line-height:30px;
text-align:center;
color:#fff;
display:block;
background:#333;
width:100px;
}
#content li a{
display:block;
float:right;
background:#333;
width:100px;
color:#fff;
text-decoration:none;
}
#content li a:hover{
color:#000;
background:#fff;
}
问题虽然小，但是经过自己研究解决印象更加深刻
评论 (0) All
