CODEWITHSUNDEEP
csshtmlhovermouseevent
Niklas R
Niklas R

Reputation: 16870

CSS div overlaps, mouse event not recognized below it

I'm creating a webpage-head that contains a menu. The menu's background-color differs from the heads' background-color and in order to have the desired box-shadow on the full head, I created a child-div that fills the whole area of the parent-div and added the box-shadow to it.

The problem is, that mouse events are not recognized any more as there is a div above it. How can I achieve that I can still hover and click on the menu?

http://jsfiddle.net/5u9yy/1/ - http://jsfiddle.net/5u9yy/13/

PS: I greatly appreciate tips on how to improve the HTML and CSS layout.
PS 2: Bizarre, it looked grate in Firefox itself, but with the JSFiddle wrapped around it some issues appear.. (ul height, head-width)

Edit: Added updated paste 13 where the ul is not transparent for better demonstration purpose. The box-shadow must be rendered on top of the ul!

Solution (thanks to TheWaxMan):
Instead of adding a div above everything to add the inset box shadow, we can give the ul a box shadow. To get the effect right, put an additional parameter to the box shadow property which offses it to the inner of the element and move the box shadow down accordingly.

/*          mode  offset-x offset-y blur offset-inner color */
box-shadow: inset 0        10px     10px -10px        #000;

Upvotes: 0

Views: 752

Answers (2)

Andrew
Andrew

Reputation: 1989

I have updated this for you. Please see this fiddle I have set position: relative on the ul because the z-index property only works when the position is set. I have then set the z-index of the ul to 2 and of the div to 1 so it is rendered behind the ul.

EDIT: I have made a couple more changes to the css. As it stands there are 4 extra lines added. position & z-index on the ul, box-shadow on the li and z-index on the div. It now looks like the box shadow from the div blends into the links. Slightly messier than the first solution, but it works.

Upvotes: 2

random_user_name
random_user_name

Reputation: 26160

Nice looking.

All I did is do some shuffling of the divs to nest them, rather than causing them to be positioned one over the top of the other. This is cleaner than having the absolute positioning.

Changed headOverall to sort of a "container" of the menu stuffs, changed it to position relative, and voila.

http://jsfiddle.net/xnJQ9/

Upvotes: 1

Related Questions