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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -