Question

我的网站顶部有一张大图片。我设置了一个带有插入阴影的虚拟div。问题是图像是一个链接，必须是可点击的，但阴影div会覆盖它并阻止它。

您可以在 FIDDLE

中查看我的问题

HTML：

<div id="menu"></div>
<div id="wrap">
    <div id="shadow"></div>
    <div id="img">
         <div id="dummy"></div>
         <a href="#">
            <img src="http://placekitten.com/1000/300"/>
        </a>
    </div>

</div>
<div id="content"></div>

CSS

body, html {
    width:100%;
    padding:0;
    margin:0;
}
#menu {
    width:100%;
    background-color:blue;
    height:60px;
}
#wrap {
    width:100%;
    position:relative;
}

#shadow {
    position:absolute;
    left: 0;
    top:0;
    right:0;
    bottom:0;
    -webkit-box-shadow: inset 0px 10px 15px -10px rgba(0, 0, 0, 1), inset 0px -10px 15px -10px rgba(0, 0, 0, 1);
    box-shadow: inset 0px 10px 15px -10px rgba(0, 0, 0, 1), inset 0px -10px 15px -10px rgba(0, 0, 0, 1);
    z-index:5;
}
#img{
    width:100%;
    max-width:700px;
    margin:0 auto;
    position:relative;
}
#dummy {
    width:100%;
    padding-top:30%;
}
#img a {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}
#img a img {
    width:100%;
    height:auto;
}
#content {
    width:100%;
    height:1000px;
}

我需要图像可点击以保持响应效果。

Answer 1

您无法使用此HTML结构执行此操作。基本上，您无法单击另一个元素下的元素。

我更新了你的小提琴：http://jsfiddle.net/d2sTD/18/

总之：我更改了HTML，因此阴影位于<a>元素中。

重新订购的HTML

<div id="menu"></div>
<div id="wrap">
    <a href="#" id="shadow"></a>
    <div id="img">
         <div id="dummy"></div>
         <img src="http://placekitten.com/1000/300"/>
    </div>
</div>
<div id="content"></div>

Answer 2

您可以在pointer-events

上将none设置为#shadow div

JSfiddle Demo

<强> CSS

#shadow {
    pointer-events:none;
}

Browser Support是IE11和现代浏览器

阴影下的链接图像无法点击

2 个答案: