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";
}
这是一个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/
#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/