CSS在悬停时更改“:after”元素的颜色

时间:2022-12-04 20:23:19

Lets say i have a list of elements :

让我们说我有一个元素列表:

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

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 .

当我悬停列表项时,我需要能够获得有关每个主题的更多信息。我用CSS做了这个:在伪元素之后。

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

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

Here is a jSfiddle

这是一个jSfiddle

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 .

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

li:after:hover {
    color: red;
}

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

Is it possible to do in CSS ?

在CSS中可以做到吗?

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

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

3 个解决方案

#1


5  

As per ExtPro's comment, you can't

根据ExtPro的评论,你不能

But you can do like...

但你可以这样做......

HTML :

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 :

CSS:

li > span {
    display:none;
}

li:hover > span {
    display:inline;
}

li > span:hover {
    color:red;
}

Use :active as onClick ?

使用:活动为onClick?

li > span:active {
    color:blue;
}

Demo : http://jsfiddle.net/79Lvn/2/

演示:http://jsfiddle.net/79Lvn/2/


or JS/jQuery way ? just...

还是JS / jQuery方式?只是...

$('ol > li').append('<span> + More info</span>');

Demo : http://jsfiddle.net/79Lvn/4/

演示:http://jsfiddle.net/79Lvn/4/

#2


18  

this works perfectly

这非常有效

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

#3


-2  

Her you go mate, did a bit of "fiddling" and got it working with CSS using

她是你的伴侣,做了一些“摆弄”,并使用CSS工作

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

:

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

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

#1


5  

As per ExtPro's comment, you can't

根据ExtPro的评论,你不能

But you can do like...

但你可以这样做......

HTML :

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 :

CSS:

li > span {
    display:none;
}

li:hover > span {
    display:inline;
}

li > span:hover {
    color:red;
}

Use :active as onClick ?

使用:活动为onClick?

li > span:active {
    color:blue;
}

Demo : http://jsfiddle.net/79Lvn/2/

演示:http://jsfiddle.net/79Lvn/2/


or JS/jQuery way ? just...

还是JS / jQuery方式?只是...

$('ol > li').append('<span> + More info</span>');

Demo : http://jsfiddle.net/79Lvn/4/

演示:http://jsfiddle.net/79Lvn/4/

#2


18  

this works perfectly

这非常有效

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

#3


-2  

Her you go mate, did a bit of "fiddling" and got it working with CSS using

她是你的伴侣,做了一些“摆弄”,并使用CSS工作

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

:

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

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