Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib, 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,

/

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

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

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');
});

• javascript
• jquery
• css

• just a heads up, you can get the "all menu items but the one ur hovering" effect with CSS only => jsfiddle.net/49Qvm/24. i know this doesn't do the "rest of the page fadeout" thing, this is a side note. – PlantTheIdea Commented Apr 5, 2013 at 18:39
• @user I updated with a working example of what you're trying to do – What have you tried Commented Apr 5, 2013 at 18:40
• @Evan jsfiddle.net/49Qvm/32 – user2213071 Commented Apr 5, 2013 at 18:55

3 Answers 3

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/

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/

I think maybe this is a scoping issue. Inside the context of the function, "this" refers to the function not the li element. I used to run into a lot of problems related to this. The solution for my cases were to look into using closures to ensure you are adding the class to the correct html element.