在IE10中，Div悬停规则不起作用

Question

这是我的第一篇文章。我还在学习CSS，非常感谢您的帮助。

我一直在尝试创建一个包含图像、半透明边框和透明覆盖层的Div。当鼠标悬停时，会添加第二个透明覆盖层，使底部边框变暗。然后我有另一个Div包含一些标题文本，标题文本应该在父Div中任何地方悬停时改变颜色，并且整个内容被单击链接。

最接近的东西在Vimeo上可以看到：

http://vimeo.com/categories

我已经成功实现了这一点，并且在IE、Firefox和Safari等浏览器中都可以正常工作。但是在IE10中，文本不再在悬停时改变颜色，也不能单击div。

以下是我的CSS：

.videoCatThumbImg {
    position:relative;
    background:#FFFFFF;
    width: 178px;
    height: 178px;
    padding: 5px 5px 5px 5px;
    margin: 10px 0px 0px 0px;
    border: 1px solid #CCCCCC;
    line-height:normal;
    float:left;
}   

.videoCatTskin {
    position: absolute; top: 5px; left: 5px;
}

.videoCatThumbHover {
    position: absolute; top: 5px; left: 5px; display: none;
}

.videoCatThumbImg:hover .videoCatThumbHover{
    display: block;
}

.videoCatTitle {
    position:absolute;
    top:5px; left:5px;
    display:block;
    width:173px;
    height:26px;
    padding:152px 0px 0px 5px;
    Font-size:18px;
    font-weight:bold;
    color: #ffffff;
}

.videoCatTitle:hover {
    color: #5798ca;
}

这是我的HTML代码：

<div class="videoCatThumbImg">
    <img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
    <img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
    <img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
    <a href="http://www.mydomain.com/category/356"><div class="videoCatTitle">Some Text Here</div></a>
</div>

任何关于我做错的建议都非常欢迎。

- Ruf1

---

通常情况下，您不会将块级元素（<div>）放在内联元素（<a>）中。 - Sparky

我知道你正在寻找一个CSS特定的解决方案，但我建议你采用jQuery方法。隐藏包含文本的div，并使用jQuery来显示/隐藏文本元素（使用不透明度）。 - Lowkase

您介意发布一个问题的 fiddle 吗？ - Nick

Answer 1

刚遇到了这个问题。所有的解决方案都不起作用（边框、背景、hasLayout）。

最后，我切换到了XHTML 1 Strict文档类型，它起作用了，如果有帮助的话...

- Savageman

Answer 2

与这个答案类似，尝试给那些没有背景的悬停类别（.videoCatThumbImg:hover）添加一个背景（透明图像或相同颜色都可以）。

- Jason

---

嗨Lokasi - 我尝试给添加背景颜色，但没有成功。嗨Sparky。如果没有div元素，我该如何实现相同的效果？ - Ruf1