javascript - 在 div 前面添加半黑色透明覆盖层

Question

我有一个如下所示的 div:

<div class="row-fluid product-to-be-categorized" data-id="584472"><img src="http://origincache-prn.fbcdn.net/10311205_575850285866660_368389950_a.jpg"></div>

我想要这样，当点击 div 时，它会在 div 前面添加一个半黑色透明的覆盖层，这样图片就被前面的这个透明层覆盖了。

我有以下点击处理程序:

  $('.product-to-be-categorized').on('click', function(event) {

                });

但我不确定最快最简单的方法是什么

Answer 1

最简单的方法是在单击事件时向 div 添加一个带有伪元素的类。

DEMO

CSS:

.product-to-be-categorized {
    position:relative;
    width:50%
}
.product-to-be-categorized img {
    display:block;
    width:100%;
}
.overlay:before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.5);
}

jQuery :

$('.product-to-be-categorized').click('click', function (event) {
    $(this).addClass('overlay');
});

(如果您需要切换叠加层，只需将 jQuery 代码中的“.addClass”替换为“.toggleClass”即可)