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

【问题标题】：Div Hover Rules not working in IE10Div 悬停规则在 IE10 中不起作用
【发布时间】：2012-12-18 03:20:38
【问题描述】：

这是我的第一篇文章。我仍在学习 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>

非常欢迎任何关于我做错了什么的建议。

【问题讨论】：

您通常不会将块级元素 (<div>) 放在内联元素 (<a>) 内。
我知道您正在寻找特定于 CSS 的解决方案，但我建议您采用 jQuery 方法。隐藏带有文本的 div 并使用 jQuery 显示/隐藏文本元素（不透明度）。
您介意发布fiddle 的问题吗？

标签： html css internet-explorer internet-explorer-10

【解决方案1】：

类似于this answer，尝试为没有它的悬停类添加背景（透明图像或同色都可以）（.videoCatThumbImg:hover）。

【讨论】：

嗨 Lokasi - 我尝试添加背景颜色，但没有奏效。嗨，斯帕基。如果没有 div 元素，我将如何实现相同的效果？

【解决方案2】：

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

最后，我切换到 XHTML 1 Strict doctype 并且它有效，如果它可以帮助...

【讨论】：