当鼠标悬停在图像和文本上时，在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; 
}

.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：

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