CODEWITHSUNDEEP
javascriptjquerycss
Tobias Hagenbeek
Tobias Hagenbeek

Reputation: 1213

remove a :before attribute on hover

I have a class on my images, and through .images:before an overlay is placed on it. Now I would like to (with jquery for instance), remove that overlay on hover...

Here's what i though but doesn't work:

$(document).ready(function(){
     $('.images').hover(function (){
           $(this).css('background','');
     });
});

Heres the css...

    .image {
    position: relative;
    display: inline-block;
}

.image:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('images/overlay.png');
}

Any help would be much appreciated

Upvotes: 4

Views: 2836

Answers (1)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

You can combine pseudo selector with a pseudo element :

.image {
    position: relative;
    display: inline-block;
}

.image:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('images/overlay.png');
}

.image:hover:before {
    display : none;
}

Fiddle : http://jsfiddle.net/Re9bj/17/

Upvotes: 7

Related Questions