5

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');
});
3
  • 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. Commented Apr 5, 2013 at 18:39
  • @user I updated with a working example of what you're trying to do Commented Apr 5, 2013 at 18:40
  • @Evan jsfiddle.net/49Qvm/32 Commented Apr 5, 2013 at 18:55

3 Answers 3

14

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/

2
  • 1
    WOW, thanks alot i used this update :) jsfiddle.net/49Qvm/31 Thanks to you :) Commented Apr 5, 2013 at 18:49
  • Aww yeah! This is perfect, thank you. Using on the nav at www.SkyRooms.IO come and check it out! (I hope this ends up being future-proof lol)
    – Andy
    Commented Jan 30, 2017 at 5:59
5

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/

1
  • Very good answer, works good. Current accepted answer is just a bit better.
    – Andy
    Commented Jan 30, 2017 at 6:00
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.