我创建了一个包含li
元素的菜单。当li:hover
时,我想对文本中的列表式项目符号进行近似,并且颜色也会发生变化。
(两者都有transition
,所以background-image
不适合!)
我已经尝试了很多不同的方法,具有相对定位和不同的边距设置,但它们都没有正常工作。有没有解决方案?
(顺便说一句,对不起我糟糕的英语!)
答案 0 :(得分:1)
<强> Give this a whirl 强>:
ul {
list-style:none;
margin:0;
padding:0;
}
ul li:before {
content: "\2022";
opacity:0;
padding:0 5px 0 10px;
margin:0;
transition:opacity 1s;
}
ul li:hover:before {
opacity:1;
}
正如@ FK32所建议的那样 - 我们可以使用:before
伪类来使用unicode字符\2022\
来模拟项目符号点。然后,我们最初将其opacity
设置为0,当用户将鼠标悬停在列表项上时,我们将不透明度更改为1,方法是应用transition:opacity 1s
,以便我们将其淡入淡出。
我删除了用户代理/自定义样式表可能已应用的任何边距或填充,然后向pseudo
添加填充,以便您可以更准确地从子弹中分隔列表项的内容。