Question: I have a div and a div:before. I want when the mouse goes over (hover) the :before element to change its color. Is there a way to do it no matter with css or jQuery?

I tried stuff like div:before:hover but nothing happened

Thanks in advance

Answer: 
You can't combine pseudo-elements quite like that, apparently. However, you can use jQuery to inject your "`:before`" element into the DOM, rather than doing it with CSS.

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

```

Then in your CSS you just reference `.interesting-before` and `.interesting-before:hover` instead of `.interesting:before` and `.interesting:before:hover`.

See <http://jsfiddle.net/Z97uN/2/> for an example.
I see several solutions:

EASIEST - you assign specific class to the div:before

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

```

However from your question it seems you cannot do that. Then leverage jQuery:

Approach #1

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

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

```

Approach #2

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

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

```

please note that you must understand that this will work only if there are only 2 divs. If there are more, all of them but the last will receive the ".specificClass." Anyway the same would happen if "span:hover:before" worked.

If you explain what and why you want to achieve what you describe we would be able to give better solution.