jQuery当悬停样式上一个和下一个兄弟姐妹答案

【问题标题】：jQuery when hover style prev and next siblingsjQuery当悬停样式上一个和下一个兄弟姐妹
【发布时间】：2013-01-18 19:41:55
【问题描述】：

我有一个导航菜单

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

我想使用 jQuery，这样当我将鼠标悬停在 li 项目上时，上一个和下一个兄弟姐妹的样式会发生变化。

例如;当我将鼠标悬停在 .menu2 上时，.menu1 和 .menu3 的边框半径变为 8px。

我知道我不能用纯 CSS 做到这一点，但是使用 jQuery 的脚本会是什么？

【问题讨论】：

你奇怪在这里使用class最好使用id
你有没有尝试过？

标签： jquery hover next siblings

【解决方案1】：

你可以使用这个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');
});

【讨论】：

【解决方案2】：

这将是一个更简单的解决方案。在 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

【讨论】：

【解决方案3】：

你可以试试这样的课程

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

【讨论】：