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

最简单的方法是在click事件的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代码中用“.toggleClass”替换“.addClass”）

Answer 2

首先，在点击处理程序中，您可以将div附加到容器中：

$('.product-to-be-categorized').on('click', function(event) {
    $('<div />').addClass('overlay').appendTo(this);
});

其中包含以下CSS：

.product-to-be-categorized {
    position: relative;
    /* other styling... */
}
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.5;
}

Example fiddle

你也可以通过检查叠加是否存在并删除：

$('.product-to-be-categorized').on('click', function(event) {
    if ($('.overlay', this).length) {
        $('.overlay', this).remove();
    }
    else {
        $('<div />').addClass('overlay').appendTo(this);
    }
});

Example fiddle

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

2 个答案: