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

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

• javascript
• jquery
• css

• You could modify the stylesheet rules, but your best options is to avoid using that pseudo element. Pseudo elements have weird behavior when interacting with javascript. – Michael Benjamin Commented May 21, 2014 at 21:02

1 Answer 1

You can bine 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/Re9bj/17/