html - 阴影下的链接图像不可点击

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结构。基本上，您不能点击位于另一个元素下方的元素。

我更新了你的 fiddle :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>