如何在懸停時屏蔽圖像？

Question

我有 9 個圖像排列成 3 行。 每行有 3 個圖像。懸停時會彈出圖像。 除了彈出的圖像之外，其余的圖像都應該變暗。 由於如果我嘗試降低圖像的不透明度，我的背景為黃色，因此圖像會呈現暗黃色。 所以我不能降低不透明度。 任何其他解決方案。 請幫助我的示例代碼

<div id="content">  
  <ul>  
    <li> <div class="imagHolder"> <img src="my-image.jpg" width="320" height="240"> </div> </li>  
  < /ul>  
</div>

CSS

#content {  
  background : yellow;  
  width : 940px;  
  height : 500px;  
}

即使我將包裝器 imagHolder 的背景顏色設置為黑色，圖像在懸停時也會顯示為暗黃色

查詢代碼

jQuery(document).ready(function() {  
  jQuery('.imagHolder').hover (function() {  
    jQuery('.imagHolder').css({'opacity' : '0.5'});  
  },  
  function(){  
    jQuery('.imagHolder').css({'opacity' : '1.0'});  
  }  
}

Answer 1

您可以在圖像元素上設置background-color: #000 - 然后您應該能夠降低不透明度以使圖像變暗。

正如評論中所指出的，您需要在圖像周圍的包裝器上設置背景顏色。 這是一個演示該技術的工作示例： http : //jsfiddle.net/UWJhM/

---

您示例中代碼的問題在於您正在更改包裝器 div 的不透明度，而不是圖像的不透明度。 在您的圖像包裝器上設置黑色背景，然后僅更改圖像的不透明度，您應該沒問題。

附帶說明一下，此效果不需要 JavaScript。 你可以用改變懸停不透明度的 CSS 規則替換你的 jQuery 代碼，並且仍然獲得相同的效果。 同樣，請參閱上面提到的 jsfiddle，其中說明了此技術。

Answer 2

換個方式試試？ 在圖像頂部制作一個 div 塊，如下所示：

<div class="imgHolder">
<img src "image01.jpg" width="100" height="100"/>
<div class="imgMask" ></div>
</div>

當然你必須像這樣應用正確的css：

.imgMask {
width:100px; height:100px; position: absolute; top: 0; left: 0; background-color: #000; display: none;
}
.imgHolder {
position: relative;
}

僅在必要時使用 .show() imgMask :)