让我说我有一个元素列表：
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
当我悬停列表项目时,我需要能够获得有关每个主题的更多信息.我用CSS做了这个：在伪元素之后.
ol {
list-style-type: decimal-leading-zero;
}
li:hover:after {
content: " + More info";
}
现在,当我在更多的信息文本上,我想改变它的颜色.我真的不知道如何实现这个效果.
我已经尝试了以下css规则,但它不能按预期工作.
li:after:hover {
color: red;
}
li:hover:after:hover {
color: red;
}
可以在CSS中做吗？
如果是,另一个问题很有趣,我可以附加一个onclick事件到：after元素吗？
解决方法
根据ExtPro的评论,您不能
但你可以像…
HTML：
<ol>
<li>First<span> + More info</span></li>
<li>Second<span> + More info</span></li>
<li>Third<span> + More info</span></li>
</ol>
CSS：
li > span {
display:none;
}
li:hover > span {
display:inline;
}
li > span:hover {
color:red;
}
使用：活动为onClick？
li > span:active {
color:blue;
}
演示：http://jsfiddle.net/79Lvn/2/
还是JS / jQuery的方式？只是…
$('ol > li').append('<span> + More info</span>');
