css - 带有图像叠加层的 IE 悬停问题

Question

我在图像包装器中有一个图像和一个叠加层。将鼠标悬停在包装上会导致覆盖从透明度 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;
}

Answer 1

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

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