鼠标经过li列表 让a标签字体颜色改变的css样式

admin
admin
admin
357
文章
104
评论
2022年6月4日08:00:42
评论
24

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

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: