Jquery :before and Css

Question

I have a div. In my CSS, I added ':before' to this div for create an other color block over it.

In jquery, I want to change the color on the mouseover but only for the "div:before" block, but it doesn't work.

How can I solve my problem ?

Thks

My CSS :

div {
    background:cyan;
    width:200px;
    height:300px;
}

div.color:before {
    content:'Color me !';
    background:orange;
    width:100px;
    height:100px;
    display:inline-block;
    position:absolute;
}

My jQuery :

$('div').addClass('color');

$("div").toggleClass("color").mouseover(function() {  
    $(this).stop().css({  'background':'#FF0000' }); 
    });

$("div").toggleClass("color").mouseout(function() {  
    $(this).stop().css({  'background':'#FFFF00' }); 
    });

Start here: http://stackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery and follow to http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after and then http://api.jquery.com/category/selectors/#Not_supported — MonkeyZeus, Feb 17 '14 at 14:54

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

There is no way to change the properties of: "before", but you can get what you want with classes modoicando class of his element, as shown here

Retrieve and modify :before element with jQuery

edited May 23 '17 at 12:13

Community

1
1

answered Feb 17 '14 at 14:57

Paulo Lima

1,238
8
8

Jquery :before and Css

1 Answers1