CSS更改“：after”的颜色。元素在悬停 [英] CSS Change color of ":after" element on hover

问题描述

假设我有一个元素列表：

Lets say i have a list of elements :

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

当我悬停列表项时，我需要能够获得更多关于每个主题的信息。我使用CSS ： c>之后使用伪元素。

When i hover a list item , i need to be able to get more info about each subject. I did this with CSS :after pseudo-element .

ol {
    list-style-type: decimal-leading-zero;
}

li:hover:after {
    content: " + More info";
}

这是一个jSfiddle

现在当我悬停在更多信息文本，我想更改它的颜色。我真的不明白如何去实现这个效果。
我已经尝试了以下CSS规则，但它不能按预期工作。

Now when i hover on the More info text , i want to change it's color . I don't really get it how to acheive this effect . i have tried the following css rules , but it does not work as expected .

li:after:hover {
    color: red;
}

li:hover:after:hover {
    color: red;
}

可以在CSS中执行吗？

Is it possible to do in CSS ?

如果是，另一个问题很有趣，我可以将 onclick 事件附加到 ：after 元素？

If yes , another question is interesting , can i attach an onclick event to the :after element ?

推荐答案

根据ExtPro的评论，您不能

As per ExtPro's comment, you can't

你可以这样做...

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

使用：active as on？

Use :active as 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/

这篇关于CSS更改“：after”的颜色。元素在悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！