Css hover on before element
Solution 1
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
Solution 2
:before
and :after
pseudo classes cannot take on other pseudo-class attributes.
Solution 3
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.
$(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.
Comments
-
Bankin almost 2 years
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