Dim rest screen on hover of menu

Question

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/

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Num</li>
</ul>

$('li').hover(function(){
    $(this).addClass('hovered');
},function(){
    $(this).removeClass('hovered');
});

Answer 1

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/

Answer 2

Try this javascript/css that utilizes z-index to create a focused effect.

CSS

.link {
  z-index: 700;
  list-style-type: none;
  padding: 0.5em;
  background: black;
  display: inline-block;
  cursor: pointer;
  color: white;
}
.dim {
  width: 100%;
  height: 100%;
  z-index: -6;
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
}

body {
  background-color: orange;
}

jQuery

var $dim = $('.dim');
$('.link').hover(function(){
  $dim.fadeIn(200);
}, function(){
  $dim.fadeOut(200);
});

HTML

<div class="dim"></div>
<ul>
  <div class="link"><li>Home</li></div>
  <div class="link"><li>Home</li></div>
  <div class="link"><li>Home</li></div>
  <div class="link"><li>Home</li></div>
</ul>

Some text here

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