当鼠标经过li列表时,通过css样式让a标签字体颜色改变的html代码

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

相关文章
系统应用

AdSense的广告投放限制如何修复

如果你是通过展示广告来获利,那么AdSense 很可能是您的广告堆栈的一部分。对于许多刚起步的发布商来说,AdSense 通常是他们使用的唯一广告网络。通过 AdSense 限制您的广告投放对大多数人...
weinxin
我的微信
微信扫一扫
admin
  • 本文由 发表于 2023年4月13日
  • 转载请务必保留本文链接:https://www.cismin.cn/133.html