html - How to make inset box shadow show over child links, but still have them be clickable? -
i have div inset box shadow , there links in div want shadow display over, still have links clickable.
here's example: https://jsfiddle.net/5rsbn927/
<div id="navigation" role="navigation"> <div id="navbar" role="navigation"> <!-- div has shadow --> <a href="#" id="link1">link</a><a href="#" id="link2">link</a><a href="#" id="link3">link</a><a href="#" id="link4">link</a><a href="#" id="link5">link</a><a href="#" id="link6">link</a> </div> </div>
the #navbar div has shadow , links inline-blocks.
i can't seem work. z-index (with positioning), pointer-events, :before, none of has worked far. time i've managed shadow show above links, aren't clickable.
for record here's how it's supposed look; want change background keep same shadow when link hovered over: http://i.imgur.com/roe6uh1.png (also changed color in jsfiddle it's easier see).
at point don't care if needs jquery or other box-shadow; needs right.
the image mentioned not have inset shadow has gradient on background white gray. can refer here.
Comments
Post a Comment