[英]How to change a <li> bullet icon when hovering on a tag in it?
在我的<ul>
列表中,我有幾個帶有<a>
標記的<li>
。
懸停在<a>
標記上時,我想更改li項目符號圖標的顏色(我的意思是<li>
旁邊的項目符號)
我試過了
a:hover {
color:red;
}
但這不會影響<li>
項目符號圖標。
我也試過
ul li:hover{
color:red;
}
但這並不完美,因為當鼠標移至<a>
標簽附近而不是<li>
,項目符號開始改變顏色。
您的代碼實際上為我工作。
<ul>
<li>
<a href="#">A</a>
</li>
<li>
<a href="#">B</a>
</li>
<li>
<a href="#">C</a>
</li>
</ul>
CSS:
ul li:hover{
color:red;
}
小提琴: https : //jsfiddle.net/tox9je8n/
我已經嘗試了一些與您的問題有關的方法,並且效果很好。 要解決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.