之前遇到的一个问题,当时觉得很诡异,后面网上搜索答案,也没有搜到很满意的,这里自己记录下。
html代码如下:
<ul>
<li><a href="#">111111</a></li>
<li><a href="#">222222</a></li>
<li><a href="#">333333</a></li>
</ul>
需要的效果是:鼠标hover到li标签上,整个li里面的文字颜色变红色。
可能一开始都认为是这样定义样式:ul li:hover{color:red;} 但是并没有效果。原因在于a:hover 的权重大于li:hover,并且a标签是行内元素,因此得先把a标签设置成block,也就是下面这样定义样式:
ul li a{display: block;}
ul li a:hover{color: #FF0000;}
这样子就能达到预期的效果了。