Geek asks and answers

Hover menu dull screen

Below is my js violin in which I tried to create a light effect, for example, the following bankalhabib.com website. The problem is that when you hover over the menu, my rest of the screen does not become dim, which I really want, but instead only my menu becomes dim.

Please let me know, ow, I can solve this problem, so can I achieve the same effect as the above site?

Thank,

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');
});
+5
source share
3 answers

I think it's best to create an element for a dark effect on the screen. When you hover over an item ul, it will switch the visibility of the dimming item.

, z-index ul , , ( ! z-index position CSS relative, fixed absolute).

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

+12

javascript/css, z-index .

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/

+5

, , . "this" , li. , . , , html.

0
source

More articles:


All Articles