Div Hover规则在IE10中不起作用

时间:2013-01-03 17:52:36

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

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

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

2 个答案:

答案 0 :(得分:0)

this answer类似,尝试将背景(透明图像或相同颜色可用)添加到没有它的悬停类(.videoCatThumbImg:hover)。

答案 1 :(得分:0)

刚出现问题。这些解决方案都没有工作(border,background,hasLayout)。

最后,我切换到XHTML 1 Strict doctype,如果有帮助的话,它可以工作......