css - 当鼠标悬停时，在带有图像和文本的 Div 上显示灰色 Div

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等都可以！

另外我需要整个 Div 是一个链接......

那么有什么想法可以做什么和使用什么？

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;
}

​</p>