CSS div和圖像不透明效果

Question

以下代碼顯示div標籤中的圖像。

<div class='item'> 
     <img class='img' src="image1.png" alt="" /> 
</div> 

我使用下面的CSS添加效果的HTML圖像代碼：

img{ 
width:50px; 
height:50px; 
opacity:0.4; 
filter:alpha(opacity=40); 

} 

img:hover{ 
opacity:1.0; 
filter:alpha(opacity=100); 
} 

我使用這在CSS透明度效果。使用此代碼，當我將鼠標懸停在圖像上時，不透明效果效果很好。但是，如何將它放在div標籤上，以便在圖像上產生不透明效果。我希望能夠將鼠標懸停在封裝圖像的項目div的任何部分上，以獲取圖像上的更改不透明效果。 NB隻影響圖像而不是整個div。這可以在CSS中完成嗎？如果是這樣如何？

Answer 1

改變這樣的：當DIV是hover狀態

img:hover{ 
opacity:1.0; 
filter:alpha(opacity=100); 
} 

到

.item:hover img{ 
opacity:1.0; 
filter:alpha(opacity=100); 
} 

這將改變img的不透明度。

Answer 2

如果你使用這個jQuery話，我認爲這將是很容易

$('.item').hover(function(){ $('.img').css('opacity','1.0');}, function(){ $('.img').css('opacity','0.4');}); 

我假定你知道的jQuery。您不能使用：根據Sitepoint將CSS的僞類懸停在沒有href屬性的元素上。