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: 
Solution 1
----------

(doesn't resolve question) With just css:

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

```

html

```
<span>text</span>

```

edit: fiddle <http://jsfiddle.net/bwkM6/>

Solution 2
----------

Work around for given problem without :before

<http://jsfiddle.net/Z97uN/1/>
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.