JQuery при наведении предыдущего и следующего элементов стиля наведения

у меня есть навигационное меню

<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 изменяется на 8 пикселей.

Я знаю, что не могу сделать это с помощью чистого CSS, но какой сценарий будет использовать jQuery?


jquery next hover siblings
person Neos Design    schedule 04.02.2013    source источник
comment
вы странно используете class лучше используйте id здесь   -  person zb'    schedule 04.02.2013
comment
Вы пробовали что-нибудь?   -  person Ravi Y    schedule 04.02.2013

Ответы (3)


arrow_upward
2
arrow_downward

Это будет более простым решением. Добавьте класс в 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;
}

Вот работающая скрипта.

person nickcoxdotme    schedule 04.02.2013

arrow_upward
1
arrow_downward

Вы можете попробовать с классом, например

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");
    });


});

Демо

person muthu    schedule 04.02.2013

arrow_upward
0
arrow_downward

Вы можете использовать этот 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');
});
person Jamir Khan    schedule 04.02.2013