jQuery的時候懸停風格prev和next兄弟姐妹

我有一個導航菜單jQuery的時候懸停風格prev和next兄弟姐妹

<ul> 
    <li id="menu1">content</li> 
    <li id="menu2">content</li> 
    <li id="menu3">content</li> 
    <li id="menu4">content</li> 
</ul>

我想使用jQuery這樣，當我將鼠標懸停在一個項目裏，一個和下一個兄弟姐妹的風格變化。

例如;當我將鼠標懸停在.menu2上時.menu1和.menu3的邊界半徑變爲8px。

我知道我不能用純CSS做到這一點，但使用jQuery的腳本是什麼？

來源

2013-02-04 Neos Design

你怪類的嘗試class'更好地利用'id'這裏 –

你嘗試過什麼？ – ryadavilli

你可以使用這個jQuery：

$('ul li a').hover(function(){ 
    (this).next().css('border-radius','8px'); 
    (this).prev().css('border-radius','8px'); 
},function(){ 
    (this).next().css('border-radius','0px'); 
    (this).prev().css('border-radius','0px'); 
});

來源

2013-02-04 06:02:46

這將是一個簡單的解決方案。在CSS中添加一個類與樣式，並使用jQuery將該類切換到懸停狀態。

jQuery的

$(document).ready(function(){ 
    $('.menu li').hover(function(){ 
     $(this).prev().toggleClass('large-border'); 
     $(this).next().toggleClass('large-border'); 
    }); 
});

HTML（類添加到父）：

<ul class="menu"> 
    <li class="menu1">content</li> 
    <li class="menu2">content</li> 
    <li class="menu3">content</li> 
    <li class="menu4">content</li> 
</ul>

添加一類在你的CSS屬性：

.large-border { 
    border-radius: 8px; 
    border: 1px solid red; 
}

這裏的工作fiddle

來源

2013-02-04 06:05:27 nickcoxdotme

這讓人驚歎。非常感謝你的幫助！ –

您可以用相同的使用`

jQuery(document).ready(function(){ 
    jQuery("div").hover(
     function(){ 
     jQuery(this).addClass("active"); 
     jQuery("div").not(".active").addClass("otherdeactive"); 
    }, 
    function(){ 
     jQuery(this).removeClass("active"); 
     jQuery("div").not(".active").removeClass("otherdeactive"); 
    }); 


});

Demo

來源

2013-02-04 06:07:30 muthu

jQuery的時候懸停風格prev和next兄弟姐妹

回答

相關問題