CSS 在鼠标悬停时更改 ":after" 元素的颜色

Question

假设我有一个元素列表：

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

当我悬停在列表项上时，我需要能够获取有关每个主题的更多信息。我使用CSS的:after伪元素来实现这一点。

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

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

这是一个 jSfiddle 示例

现在，当我将鼠标悬停在“更多信息”文本上时，我希望改变它的颜色。但我不太明白如何实现这种效果。 我尝试了以下的 CSS 规则，但没有达到预期效果。

li:after:hover {
    color: red;
}

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

是否可以用 CSS 实现？

如果可以，另一个有趣的问题是，我能否将 onclick 事件附加到 :after 元素上？

- Alexander

---

你不能使用CSS和:after伪类来实现这个，也不支持“onclick”事件。 - SW4

Answer 1

这个完美地运作。

.topButton:hover:after{
    background-color: #000;
}

- kyle

---

完美运行！！这应该是被接受的答案。 - Juan Santiago Acevedo Correa

最佳解决方案！！ - Anand

@NevinMadhukarK，嗯...这个更好在哪里？这个答案没有解决问题。当:after悬停时，OW需要进行样式设置。 - l2aelba

这将为伪元素设置样式，当任何部分的.topButton被悬停时，因此它并不完美，也不是一个可接受的答案。 - JWiley

这不会按要求设置颜色，只会设置背景颜色(bgColor)。 - Spikolynn

Answer 2

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

可以使用 :active 作为 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/

- l2aelba

---

谢谢您的回答，我明白我可以这样做，但我只是好奇是否可以用纯CSS的方式来实现。 - Alexander

Answer 3

这里是你需要的，我稍微“摆弄”了一下，使用CSS让它正常工作了。

.third:hover .sub{
      display:inline;   
}

:

http://jsfiddle.net/79Lvn/3/

- Dr Robotnik

---

抱歉，我不知道你的意思。因为我花了时间研究这段代码，所以这样严厉地打分让我感到很失望。 - Dr Robotnik