最近改写一个页面，想要鼠标移动上去后，改变li列表的背景颜色，同时保证a标签中的字体颜色也随之改变。
之前的html代码和css样式如下：
<ul>
<li><a href="#">链接1</a> </li>
<li><a href="#">链接2</a> </li>
<li><a href="#">链接3</a> </li>
</ul>
/* css代码 */
ul li:hover{
background-color: #fafafa; /*改变li列表的背景颜色*/
color: #ff8f00;
}上述html代码的css样式可以改变列表的背景颜色，但改变不了a标签的字体颜色。
原因在于：
a标签元素继承的权重没有a标签浏览器默认设置的高，解决方法可以是再多写一句css语句，将a标签单独写一句css样式，给a标签指定固定颜色属性：
ul li:hover a{
color: #ff8f00; /*设置鼠标移动到列表文字以后的颜色*/
}完整代码如下（复制保存为html格式可运行）：
<html>
<head>
</head>
<style type="text/css">
/* css代码 */
ul{
list-style-type:none;//删除列表前面默认的列表符号
}
ul li a{
background: #fafafa; /*设置a标签文字的背景颜色*/
}
ul li{
margin: 7px 0 0;; /*列表上下间距7px*/
}
ul li:hover{
background-color: #fafafa; /*改变li列表的背景颜色*/
color: #ff8f00;
}
ul li:hover a{
color: #ff8f00; /*设置鼠标移动到列表文字以后的颜色*/
}
</style>
<body>
<ul>
<li><a href="#">链接1</a> </li>
<li><a href="#">链接2</a> </li>
<li><a href="#">链接3</a> </li>
</ul>
</body>
</html>
评论