簡體   English   中英

如何更改 <li> 將項目符號圖標懸停在標簽上時?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM