Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Dim rest screen on hover of menu

Dim rest screen on hover of menu

Problem

Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of Screen is not getting dim which i actually want and instead only my menu is getting dim.

Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site?

Thanks,

http://jsfiddle.net/49Qvm/9/

  • Home
  • About
  • Contact
  • Num
$('li').hover(function(){ $(this).addClass('hovered'); },function(){ $(this).removeClass('hovered'); });
Problem courtesy of: user2213071

Solution

I think your best bet would be to create an Element for the darken effect on the screen. When you hover over the ul element it will toggle the visibility of the darkening element.

You will need to be sure that the z-index value for the ul element is higher than the element that provides the darkening effect (Remember this! When setting z-index on an element you will need to be sure to set it's position CSS property to relative, fixed, or absolute).

Here's a fiddle: http://jsfiddle.net/49Qvm/28/

Solution courtesy of: kyle.stearns

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Dim rest screen on hover of menu

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×