简体   繁体   中英

linked image under shadow not clickable

I have a large image at the top of my website. I set a dummy div with inset shadow over it. The problem is that the image is a link and must be clickable but the shadow div overlays it and prevents that.

You can see my issue in this 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;
}

I need the image to be clickable keeping the responsive effect.

You can't do it with this HTML structure. Basically, you can't click on an element that is under another.

I updated your fiddle : http://jsfiddle.net/d2sTD/18/

In a word : I changed the HTML so the shadow is in your <a> element.

Re-Ordered 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>

You can set the pointer-events to none on the #shadow div

JSfiddle Demo

CSS

#shadow {
    pointer-events:none;
}

Browser Support is IE11 and modern browsers

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM