包裹在懸停時更改項目符號顏色

Question

懸停<a>時，我想更改此<ul>中所有項目符號的顏色。 我嘗試了很多事情，但似乎唯一起作用的是：使用偽元素。 當您在下面運行該代碼時，您會看到-項目符號的顏色在懸停時不會改變。

HTML

<a>
    <ul>
        <li>Lorem ipsum dollar is great</li>
        <li>Dollar is better bio element</li>
    </ul>              
</a>

CSS

a {
     text-decoration: none;
     color: black; 
}

a:hover {
     text-decoration: none;
     color: green; 
}

指向代碼的鏈接。 jsfiddle.net

是否有不使用偽元素且不使用列表樣式圖形的解決方案？

Answer 1

項目符號（即list-style-types ）應繼承currentColor 。

當鼠標懸停顏色改變時，Chrome“忘記”重新繪制項目符號。 有關Chrome與其他瀏覽器區別的示例，請參見此小提琴 。 那么，我們如何欺騙Chrome重新繪制沒有偽元素和圖形的項目符號？ 通過擺弄邊距和填充。 通過強制Chrome從一種方式切換到另一種方式，它也可以重新繪制項目符號，因此有多種樣式來設置默認項目符號列表的樣式。

  #one:hover, #two:hover { color: red; } #two{ margin-left: 40px; padding-left: 0px; } #two:hover{ margin-left: 0px; padding-left: 40px; } 

  <ul id='one'> <li>In Chrome:</li> <li>The bullets don't change colour</li> <li>when you hover over this list.</li> </ul> <ul id='two'> <li>The bullets change colour</li> <li>in all browsers</li> </ul>