昏暗的休息屏幕

以下是我的js小提琴中，我試圖創建一個光出像下面的網站bankalhabib.com效果，問題是，在菜單上懸停我的屏幕的其他部分並沒有得到其暗淡我其實只想要我的菜單變暗。昏暗的休息屏幕

請讓我知道，超重我可以解決這個問題，所以我可以達到同樣的效果如上所述網站？

感謝，

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

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

來源

2013-04-05 user2213071

剛擡起頭，就可以得到「所有菜單項，但一個回合盤旋」與CSS僅=> http://jsfiddle.net/49Qvm/24/效果。我知道這不會做「頁面淡出」的事情，這是一個側面說明。 – PlantTheIdea

@user我更新了你正在嘗試做的一個工作示例 –

@Evan http://jsfiddle.net/49Qvm/32/ – user2213071

我覺得你最好的選擇將是爲在屏幕上變暗效果創建一個元素。當您將鼠標懸停在ul元素上時，它將切換變暗元素的可見性。

您將需要確保用於ul元素z-index值比提供黑斑效應元素較高（記住這一點！當一個元素上設置z-index你將需要一定要設置它的position CSS屬性relative，fixed，或者absolute）。

這裏有一個小提琴：http://jsfiddle.net/49Qvm/28/

來源

2013-04-05 18:40:52

WOW，非常感謝我使用此更新:) http://jsfiddle.net/49Qvm/31 /感謝你:) – user2213071

哦，戴爾哈哈剛剛發佈了一個這樣的答案:) –

@derek_duncan +1，謝謝，我喜歡你的風格化的答案:) – user2213071

我想，也許這是一個範圍的問題。在函數的上下文中，「this」是指函數而不是li元素。我曾遇到過很多與此相關的問題。我的案例的解決方案是使用閉包來確保將類添加到正確的html元素。

來源

2013-04-05 18:36:17 tuck

嘗試這個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/

來源

2013-04-05 19:01:42

非常好的答案，效果很好。目前接受的答案只是好一點。 – Andy

昏暗的休息屏幕

回答

相關問題