1

我有以下 HTML：

<a href="somewhere">
    <span class='mask'></span>
    <img src="my_image.jpg" />
</a>

和以下CSS：

a {
    display: block;
    position: relative;
}

a:hover .mask{
    background: rgba(255,255,255,0.1);
}

.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

而且，在视觉上，它按预期工作。悬停时，会在其自身<a>上显示一个半透明蒙版。

但是，在除 IE 之外的所有浏览器中，当我右键单击 时<a>，它都按预期工作——我看到了链接的上下文菜单。

但在 IE 中，我看到的上下文菜单就像我右键单击页面中的任何其他静态项目一样。我正在寻找一种使上下文菜单在 IE 中按预期工作的方法。

干杯!

4

1 回答 1

0

这在 IE 9 中对我有用 - 将 z-index: -1 添加到.mask. 尽管 z-index 会影响您的遮罩视觉效果。

.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

http://jsbin.com/osegib/1/edit#/osegib/2/edit

于 2013-03-05T09:26:00.067 回答