我如何遮掩圖片懸停？

我有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代碼
jQuery(document).ready(function() { jQuery('.imagHolder').hover (function() { jQuery('.imagHolder').css({'opacity' : '0.5'}); }, function(){ jQuery('.imagHolder').css({'opacity' : '1.0'}); } }

暗淡黃色

來源

2011-05-19 JAB

您提供的示例代碼具有完全不透明的圖像，懸停時不透明度不變，因此我們很難知道您的問題是什麼樣子。你能否提供一個完整的例子，包括懸停效果，不按你的意願工作？最簡單的方法可能是創建一個顯示問題的jsfiddle。這樣，其他人可以直接嘗試你的代碼，看看你的意思。 – 2011-05-19 09:54:45

@PärWieslander：我在我的問題中添加了jquery代碼。如果你仍然不清楚這個問題，請讓我知道..對不起，提供一半的信息 – JAB 2011-05-19 10:10:48

問題似乎是你改變'.imagHolder'包裝的不透明度，而不是隻是圖像。有關詳細信息，請參閱我更新的答案中的評論 – 2011-05-19 10:41:10

您可以在圖像元素上設置background-color: #000 - 那麼你應該能夠減少不透明度以使圖像變暗。

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

與您的示例代碼的問題是，你改變包裝div的不透明度，而不是你的圖像的不透明度。在圖像包裝上設置黑色背景，然後更改圖像的不透明度，只有，並且應該沒問題。

在附註中，JavaScript並不是這種效果所必需的。你可以用CSS規則替換你的jQuery代碼來改變懸停時的不透明度，並且仍然可以得到相同的效果。再次看到上面提到的jsfiddle這個技術的例子。

來源

2011-05-19 08:06:37

你可能會發現背景變暗 - 所以您可以考慮使圖像具有黑色背景的容器？ – 2011-05-19 08:27:30

@Tristar網頁設計：我曾嘗試在容器中放置圖像。但在懸停時，它們顯得暗黃色 – JAB 2011-05-19 08:38:57

甚至嘗試過這種方式，但它不起作用（再次懸停時，它們本身呈暗黃色） – JAB 2011-05-19 08:42:10

試過它的另一種方式？讓一個div塊上的圖像的頂部，例如：

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

當然

u必須應用正確的CSS這樣：

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

只是.show（）的imgMask必要時:)

來源

2011-05-19 08:55:44 Yman

我如何遮掩圖片懸停？

回答

相關問題