带有图像叠加层的 IE 悬停问题答案

【问题标题】：IE Hover Issue with an Image Overlay带有图像叠加层的 IE 悬停问题
【发布时间】：2013-10-26 10:17:33
【问题描述】：

我在图像包装器中有一个图像和一个叠加层。将鼠标悬停在包装上会导致覆盖从透明度 0 变为 0.8。它适用于除 IE 以外的所有浏览器。我相信我正在使用正确的 IE 过滤器来处理不透明度。请看代码：

HTML

<div class="img-wrap">
    <img class="profile" src="images/z.jpg">
    <a href="team-employee-z.html" class="img-overlay team"> </a>
</div>

CSS

.img-wrap {
    margin-right: 3px;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 250px;
}

.img-overlay {
    text-decoration: none;
    display: none;
    height: 100%;
    background-color: #000;
    color: #fff;
    opacity: 0;
    filter: alpha(opacity = 0);
    position: absolute;
    width: 100%;
    z-index: 100;
}

.img-overlay.team {
    top: 0;
}

.img-wrap:hover .img-overlay {
    display: block;
    opacity: 0.80;
    filter: alpha(opacity = 80);
    transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}

【问题讨论】：

IE 有很多版本 - 最好指定您关心的版本。
也许您必须在.img-wrap:hover 中重置正确的过滤器。试试：-ms-filter: "";

标签： css internet-explorer hover overlay opacity

【解决方案1】：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

这个过滤器应该适用于 ie 7-8

【讨论】：

谢谢，但问题存在于所有 IE 版本（包括 9/10）
你仍然可以尝试这个过滤器，因为无论如何你都会需要它。您可以尝试删除所有额外的过滤器线并让基本工作。