最近改写一个页面，想要鼠标移动上去后，改变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>
谷歌英文关键词搜索：为什么95%的人都是错误的
关键词搜索(Keyword Research)可以说是做Niche和Affiliate的关键，找到一个有价值的关键词也就意味着你已经成功了80%，剩下的20%只需要你按部就班的执行和操作就可以了。但是...
宝塔面板出错AttributeError: module ‘public’ has no attribute ‘get_size_total’
AttributeError: module 'public' has no attribute 'get_size_total' REQUEST_DATE: 2024-07-03 11:10:50 ...
什么是SEO？这里有20个关于SEO的基础概念
如果你拥有一个网站或独立博客，或者你的工作多少和互联网有关，那你一定耳濡目染多多少少对SEO（搜索引擎优化）有一定了解。本文将列举其中20个SEO领域最常用的名词和概念。 这里要介绍的内容只适合新手和...
Google Adsense中的锚定广告介绍以及开启和关闭方法
近期登陆Google Adsense提示上述信息： 锚定广告将于 7 月 19 日之后开始在较宽的屏幕（例如桌面设备）上展示 官方对锚定广告也有解释说明： 锚定广告现在支持更大范围的屏幕尺寸。对于启用...
我的微信
我的微信
微信扫一扫
评论