Przyciemnij ekran spoczynkowy po najechaniu na menu

Question

Oto moje jsowe skrzypce, w którym próbowałem stworzyć efekt świetlny, jak na poniższej stronie bankalhabib.com, Problem polega na tym, że po najechaniu w menu moja reszta ekranu się nie ściemnia naprawdę chcę i zamiast tego tylko moje menu staje się słabe.

Uprzejmie proszę dać mi znać, czy mogę rozwiązać ten problem, aby osiągnąć taki sam efekt jak wyżej wspomniana strona?

Dzięki,

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

Myślę, że najlepiej byłoby stworzyć element do efektu przyciemnienia na ekranie. Po najechaniu kursorem na element ul zmieni on widoczność ciemniejącego elementu.

Musisz mieć pewność, że wartość z-index dla elementu ul jest wyższa niż element, który zapewnia efekt przyciemnienia (Pamiętaj o tym! Przy ustawianiu z-index na elemencie trzeba mieć pewność, aby ustawić to position Właściwość CSS do relative, fixed lub absolute).

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

Answer 2

Myślę, że jest to kwestia określania zakresu. Wewnątrz kontekstu funkcji "to" odnosi się do funkcji, a nie do elementu li. Zwykłem napotykać na wiele problemów związanych z tym. Rozwiązaniem dla moich przypadków było przyjrzenie się użyciu zamknięć, aby upewnić się, że dodajesz klasę do poprawnego elementu html.

Answer 3

Spróbuj javascript/css, który wykorzystuje z-index stworzyć skoncentrowaną efekt.

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/