CSS在悬停时更改“：after”元素的颜色答案

【问题标题】：CSS Change color of ":after" element on hoverCSS在悬停时更改“：after”元素的颜色
【发布时间】：2016-10-02 02:31:52
【问题描述】：

假设我有一个元素列表：

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

现在，当我将鼠标悬停在 More info 文本上时，我想更改它的颜色。我真的不明白如何实现这种效果。我尝试了以下 css 规则，但它没有按预期工作。

li:after:hover {
    color: red;
}

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

可以用 CSS 做吗？

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

【问题讨论】：

标签： html css

【解决方案1】：

效果很好

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

你去吧，伙计，做了一些“摆弄”，让它与 CSS 一起使用

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

：

【讨论】：