メニューのホバー上のぼんやりした残りの画面

Question

次は、私が次のウェブサイトbankalhabib.comのようなライトアウト効果を作り出そうとした私のjsフィドルです。問題はメニュー上のホバー上で私の残りの部分は薄暗くなりません私は実際に欲しいだけでなく、私のメニューだけが暗くなっています。

私はこの問題を解決することができますので、私は上記のサイトと同じ効果を達成することができますか？

おかげで、

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

私はあなたの最善の策は、画面上の暗い効果の要素を作成することだと思います。 ul要素の上にマウスを置くと、暗くなる要素の可視性が切り替わります。

あなたはul要素のz-index値が暗くなる効果を提供要素よりも高くなっていることを確認する必要があります（要素にz-indexを設定する場合この！を忘れないでください、あなたはそれがpositionだ必ず設定してくださいする必要があります。 CSSプロパティをrelative,fixed、またはabsoluteに設定します）。ここで

はフィドルです：http://jsfiddle.net/49Qvm/28/

Answer 2

私は多分、これはスコープの問題だと思います。関数の文脈の中で、 "this"はli要素ではない関数を指します。私はこれに関連した多くの問題にぶつかっていました。私の場合の解決策は、クロージャを使用して正しいhtml要素にクラスを追加していることを確認することでした。

Answer 3

は、集束効果を作成するためにz-indexを利用してこのJavaScript/CSSを試してみてください。

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/