javascript - 删除 :before attribute on hover

Question

我在我的图像上有一个类，并通过 .images:before 在其上放置了一个叠加层。现在我想(例如使用 jquery)，删除悬停时的覆盖...

这是我认为但不起作用的方法:

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

这是 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');
}

任何帮助将不胜感激

Answer 1

您可以将伪选择器与伪元素结合使用:

.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/