0

最近改写一个页面,想要鼠标移动上去后,改变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>

作者 网络

发表评论

您的电子邮箱地址不会被公开。