包裹在<a>

Question

I want to change the color of all the bullets in this <ul> when hovering the <a>. I tried many things, but the only thing that seems to work is: using pseudo elements. When you run that code below, you will see - the bullets color doesn't change on hover.

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; 
}

A link to the code. jsfiddle.net

中的悬停更改子弹颜色

是否有解决方案不使用伪元素且不使用列表样式的图形？

Answer 1

子弹，即list-style-types，应继承currentColor。

当悬停时颜色发生变化Chrome'忘记'重绘子弹。有关Chrome与其他浏览器不同的示例，请参阅this fiddle。那么我们如何欺骗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>