<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”元素的颜色所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)