當選擇當前菜單項時，其他淡入淡出

我在「聯繫」頁面中。我希望「聯繫人」菜單項的透明度爲100％，其餘爲30％的不透明度。我在「關於」頁面。我希望「關於」菜單項的透明度爲100％，其餘爲30％的不透明度。

我的菜單是這樣的：

HTML：

<ul class="menu"> 
<li class="menu-item menu-item-1"><a href="some_link">Home</a></li> 
<li class="menu-item menu-item-2 current-menu-item"><a href="some_link">Contact</a></li> 
<li class="menu-item menu-item-3"><a href="some_link">About</a></li> 
</ul>

CSS：

.menu .menu-item-1 {background: url('images/image1.jpg');} 
.menu .menu-item-1 a {background: url('images/transparent-black-border-1.png') no-repeat; background-position: bottom;} 
.menu .menu-item-2 {background: url('images/image2.jpg');} 
.menu .menu-item-2 a {background: url('images/transparent-black-border-2.png') no-repeat; background-position: bottom;} 
.menu .menu-item-3 {background: url('images/image3.jpg');} 
.menu .menu-item-3 a {background: url('images/transparent-black-border-3.png') no-repeat; background-position: bottom;}

我想要什麼： 當.current菜單項出現類，該菜單項應該是100不透明度，其他菜單項應該是30％。此外，.menu .menu-item-1背景圖像也應該消失，不僅是a-tag。

你能幫我嗎？

來源

2014-07-17 Pufarina

你擡頭在這個空間什麼？有很多jquery插件已經存在這個功能 –

您可以使用not（）函數..

個

JSFiddle

JS：

$(".menu-item").on('mouseenter', function(){ 
    $(".menu-item").find('a').not($(this).find('a')).css('opacity','0.3') 
}).on('mouseleave', function(){ 
    $(".menu-item").find('a').css('opacity','1'); 
});

HTML：

<ul class="menu"> 
    <li class="menu-item"><a href="some_link">Some text</a></li> 
    <li class="menu-item"><a href="some_link">Some text</a></li> 
    <li class="menu-item"><a href="some_link">Some text</a></li> 
</ul>

注：具有UL內錨標籤是一種不好的做法。 ul內應該只有li標籤。因此，我將a標籤放在每個列表中。 E：在更新之後，你說你想要不透明度爲1的當前頁面，其餘的爲0.3。在懸停時，您希望懸停的li元素也繼續1。

Updated Fiddle

在你的HTML標記你設置的類別在期望的菜單項的每個頁面激活。給這個類不透明度爲1，其餘菜單項爲不透明度爲0.3。在懸停時，請勿觸碰活動課程，但其他課程。

HTML：

<ul class="menu"> 
    <li class="menu-item active"><a href="some_link">Home</a></li> 
    <li class="menu-item"><a href="some_link">Page1</a></li> 
    <li class="menu-item"><a href="some_link">Page2</a></li> 
</ul>

CSS：

.menu-item { 
    opacity: 0.3; 
} 
.active { 
    opacity: 1; 
}

JS：

$(".menu-item").on('mouseenter', function(){ 
    $(this).not('.active').css('opacity','1') 
}).on('mouseleave', function(){ 
    $(this).not('.active').css('opacity','0.3'); 
});

來源

2014-07-17 13:10:59 gulty

是啊對不起，一個標籤是在裏面的標籤。你的代碼做什麼：當我將鼠標懸停在一個項目上時，該項目保持不透明狀態，其他項目將變爲0.3不透明狀態。我想要的是，當我在菜單項上輸入一個.current-menu-item類時，當前菜單項應保持100％不透明度，其餘的不透明度爲30％，而不僅僅是懸停。我會編輯我的帖子以獲得更好的理解。 – Pufarina

@Pufarina然後只需添加這個CSS'a.current-menu-item {opacity：1; }'＆'.menu a {opacity：.3}'。在活動鏈接上設置當前菜單項類。這是一個很好的答案。我只會補充說，而不是鏈接jquery方法，傳遞一個對象會更有效率，例如。 '.on（{mouseenter：function（）{...}，mouseleave：function（）{...}）' – Tyblitz

我在frist（用CSS）做了這個。問題是，在HOME頁面上，主菜單項目處於100％不透明度，其他處於30％。我想要當我在我的主頁上，我的所有菜單項都是100％不透明。對於這個我想我需要jQuery。 – Pufarina

要改變，你可以做這樣的事情不透明度：

$(".menu-item").hover(function(){ 
    $(".menu-item").each(function(){ 
     $(this).css("opacity", 0.8); 
    }) 
    $(this).css("opacity", 1); 
});

爲了更容易選擇，這將是更好地改變你的HTML結構成這樣：

<ul class="menu"> 
    <li class="menu-item menu-item-1">...</li> <a href="some_link">Some text</a> 
    <li class="menu-item menu-item-2">...</li> <a href="some_link">Some text</a> 
    <li class="menu-item menu-item-3">...</li> <a href="some_link">Some text</a> 
</ul>

對於圖像轉變成B & W /灰度需要使用HTML5畫布，並使用此jQuery.BlackAndWhite ..

來源

2014-07-17 12:45:48

當選擇當前菜單項時，其他淡入淡出

回答

相關問題