更改<a>中包裹的悬停时的项目符号颜色

Peter 发表于 Dev

彼得

我想在将<ul>鼠标悬停时更改所有项目符号的颜色<a>。我尝试了很多事情，但似乎唯一起作用的是：使用伪元素。当您在下面运行该代码时，您会看到-项目符号的颜色在悬停时不会改变。

的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

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

沙漠射线

项目符号，即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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。