顯示灰色事業部在分度，圖像和文本，當鼠標移到

Question

我想這樣做：

我有一個項目一個div：標題，圖片和一些文字。當我把鼠標放在該div我需要這個div來變成灰色，像圖像2.我有這樣的代碼：

CSS

.container div { 
    display: none; 
    width: 250px; 
    height: 250px; 
} 

.container:hover div { 
    display: block; 
} 

.graydiv { 
    background-image:url(over.png); // transparent gray png 
    position: absolute; 
    margin-top: -250px; 
} 

HTML：

<div class="container"> 
<img src="someimg.jpg" alt="" /> 
<p>some text</p> 
<p>some text</p> 
<div class="graydiv"></div></div> 

但IE8不顯示灰色的div ... Chrome，Firefox等等都可以！

此外，我需要整個事業部是一個鏈接...

所以任何想法做什麼，用什麼？

Answer 1

試試這個。 http://jsfiddle.net/QZbRw/

HTML

<a href="#"> 
    <div class="container"> 
     <img src="someimg.jpg" alt="" /> 
     <p>some text</p> 
     <p>some text</p> 
    </div> 
    <span class="hover"></span> 
</a>​ 

CSS

.container { 
width: 250px; 
height: 250px; 
background:#FFF; 
} 

a:hover .hover{ 
width: 250px; 
height: 250px; 
background:#000; 
opacity:0.5; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=50); 
z-index:100; 
float:left; 
position:relative; 
top:-250px; 
}