我有以下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中按预期工作。
干杯!
答案 0 :(得分:0)
这在IE 9中适用于我 - 将z-index:-1添加到.mask
。虽然z-index会影响你的掩蔽视觉效果。
.mask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}