[英]How to change a <li> bullet icon when hovering on a tag in it?
In my <ul>
list I have several <li>
with <a>
tags in them. 在我的
<ul>
列表中,我有几个带有<a>
标记的<li>
。
I want to change the color of the li bullet icons when hovering on the <a>
tag (I mean bullets beside <li>
) 悬停在
<a>
标记上时,我想更改li项目符号图标的颜色(我的意思是<li>
旁边的项目符号)
I tried 我试过了
a:hover {
color:red;
}
but it doesn't affect the <li>
bullet icon. 但这不会影响
<li>
项目符号图标。
I also tried 我也试过
ul li:hover{
color:red;
}
But it doesn't work perfectly because when mouse move to near <a>
tag and not on it <li>
and the bullets starts to change color. 但这并不完美,因为当鼠标移至
<a>
标签附近而不是<li>
,项目符号开始改变颜色。
your code actually worked for me. 您的代码实际上为我工作。
<ul>
<li>
<a href="#">A</a>
</li>
<li>
<a href="#">B</a>
</li>
<li>
<a href="#">C</a>
</li>
</ul>
CSS: CSS:
ul li:hover{
color:red;
}
Fiddle: https://jsfiddle.net/tox9je8n/ 小提琴: https : //jsfiddle.net/tox9je8n/
I have tried something related to your question and it works fine. 我已经尝试了一些与您的问题有关的方法,并且效果很好。 To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.
要解决li:hover不能悬停链接的问题,应将display:block设置为如下所示,以使其具有全宽。
ul li a { color: black; display: block } ul li:hover { color: red; } ul li:hover a { color: black; }
<ul> <li><a href="#">Value 1</a></li> <li><a href="#">Value 2</a></li> <li><a href="#">Value 3</a></li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.