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

html – CSS在悬停上更改“:after”元素的颜色,第1张

概述让我说我有一个元素列表: <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”元素的颜色所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1100043.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存