假设我有一个元素列表:
<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
现在当我将鼠标悬停在More info
文本上时,我想更改它的颜色。我真的不明白如何达到这种效果.我已经尝试了以下CSS规则,但它没有按预期工作。
li:after:hover {
color: red;
}
li:hover:after:hover {
color: red;
}
可以在 CSS 中做吗?
如果是,另一个问题很有趣,我可以将onclick
事件附加到:after
元素吗?
这很完美
.topButton:hover:after{
background-color: #000;
}
根据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/
她你去伴侣,做了一些"摆弄",让它使用 CSS
.third:hover .sub{
display:inline;
}
:
http://jsfiddle.net/79Lvn/3/