Css悬停在元素之前

Question

我有一个div和一个div：之前。我希望当鼠标移过（悬停）：before元素以更改其颜色时。有没有办法做到这一点，无论使用css还是jQuery？

我试过像div这样的东西：之前：悬停但没有发生任何事情

提前致谢

Answer 1

解决方案1 ​​

（不解决问题）只用css：

span:before {
    color: red;
    content: "hi";
}
span:hover:before {
    color: blue;
}

HTML

<span>text</span>

编辑：小提琴http://jsfiddle.net/bwkM6/

解决方案2

在没有：之前

之前解决给定问题

http://jsfiddle.net/Z97uN/1/

Answer 2

:before和:after伪类不能承担其他伪类属性。

Answer 3

显然，你无法将伪元素组合起来。但是，您可以使用jQuery将“:before”元素注入DOM，而不是使用CSS。

$(function() {
    $('div.interesting').before('<div class="interesting-before"></div>');
});

然后在您的CSS中，您只需引用.interesting-before和.interesting-before:hover，而不是.interesting:before和.interesting:before:hover。

有关示例，请参阅http://jsfiddle.net/Z97uN/2/。

Answer 4

我看到了几个解决方案：

EASIEST - 你为div指定特定的类：在

之前

//HTML
<div class="specificClass">A</div>
<div>B</div>
<style>
.specificClass:hover {color: red}
</style>

然而，从您的问题来看，您似乎无法做到这一点。然后利用jQuery：

方法＃1

//JAVASCRIPT
$("div").prev().addClass("specificClass");

//in your CSS 
.specificClass:hover {color:red}

方法＃2

//JAVASCRIPT
$("div").delegate($("div").prev(),"mouseenter mouseleave",function(){
    $(this).toggleClass("specificClass");
}

//in your CSS 
.specificClass {color:red}

请注意，您必须明白只有只有2个div才能使用。如果还有更多，那么除了最后一个都会收到“.specificClass”。无论如何，如果“span：hover：before”工作，也会发生同样的情况。

如果您解释为什么以及为什么要实现您所描述的内容，我们将能够提供更好的解决方案。

Answer 5

正确的语法是

div:hover:before
{
//css here
}

jsfiddle