javascript - remove a :before attribute on hover - Stack Overflow|Programmer puzzle solving

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

Share Improve this question edited May 21, 2014 at 21:02 Artjom B. 62k26 gold badges136 silver badges231 bronze badges asked May 21, 2014 at 20:56 Tobias Hagenbeek 1,2133 gold badges16 silver badges32 bronze badges

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

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

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/

Programmer puzzle solving

javascript - remove a :before attribute on hover - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)