悬停时更改子弹颜色<a>

我想在悬停<a>时更改此<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; }

A link to the code. jsfiddle.net

是否有解决方案，而无需使用伪元素和没有列表样式使用图形？

来源

2015-11-04 Peter

你的代码看起来对我好，但我可能会使用'答：悬停ul'而不只是一个'的：hover'。为什么你不想使用伪元素呢？ – vaultah

@vaultah因为您需要设置伪元素的样式并删除原始项目符号。 – Peter

，但使用伪元素可以更好地控制你的样式。我个人更喜欢伪代码默认 –

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

来源

2015-11-05 12:06:12 woestijnrog

非常好的解决方案... – akash

悬停时更改子弹颜色<a>

回答

相关问题