html – CSS在悬停上更改“：after”元素的颜色

概述让我说我有一个元素列表： <ol> <li>First</li> <li>Second</li> <li>Third</li></ol> 当我悬停列表项目时,我需要能够获得有关每个主题的更多信息.我用CSS做了这个：在伪元素之后. ol { list-style-type: decimal-leading-zero;}li:hover:after { 让我说我有一个元素列表：

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

Here is a jSfiddle

现在,当我在更多的信息文本上,我想改变它的颜色.我真的不知道如何实现这个效果.
我已经尝试了以下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>');

演示：http://jsfiddle.net/79Lvn/4/

总结

以上是内存溢出为你收集整理的html – CSS在悬停上更改“：after”元素的颜色全部内容，希望文章能够帮你解决html – CSS在悬停上更改“：after”元素的颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。