在一個div的前面添加一個半黑TRANSPARANT覆蓋

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，然後當它增加了一個半黑TRANSPARANT疊加在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'); 
}); 

（如果你需要切換覆蓋，只需更換 「.addClass」「 .toggleClass「在jQuery代碼中）

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

您也可以通過檢查它的存在和卸妝覆蓋togglable：

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

Example fiddle