最近改写一个页面，想要鼠标移动上去后，改变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>
相关文章
win10系统C盘里胡windows.old文件可以删除吗
最近将系统升级到了win10 1803版本，再查看系统c盘，60G的c盘只剩下16G的空间了，打开C盘查看多了一个文件夹windows.old。 查看windows.old文件夹属性发现，竟然占了23...
推荐WordPress优化加速缓存插件WP Super Cache的设置教程
WordPress如果要优化访问速度的话就必须涉及到缓存技术，WP的缓存技术是广大WP博主经常讨论的话题，品自行博客也做了一番研究，今天安装了一个WP-Super-Cache插件，来加速品自行博客网站...
如何查看网站是否开启了gzip压缩的三种方法
品自行博客提供两种方法查询网页是否开启了gzip压缩，第一种方法用站长工具进行查询最简单，第二种方法稍微麻烦点，但更加具体，站长工具查询其实也是通过第二种方法的原理进行查询网页是否开了gzip压缩的。...
如何隐藏WordPress网站管理后台登录的地址
WordPress网站的后台登录地址几乎是众人皆知，这固然是因为WordPress的安全性能好的缘故，但把后台登录地址暴露在大众面前毕竟不是什么好事，所以我们最好还是修改一下WordPress的后台地...
我的微信
微信扫一扫
评论