删除悬停时的 :before 属性

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;
}

小提琴： http: //jsfiddle.net/Re9bj/17/