jQuery当悬停样式的prev和next兄弟

mrphzbgm  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(152)

我有导航菜单

<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的脚本会是什么呢?

hyrbngr7

hyrbngr71#

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

kpbpu008

kpbpu0082#

你可以尝试像这样的类

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

fxnxkyjh

fxnxkyjh3#

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

相关问题