0

ナビメニューがあります

<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 を使用したスクリプトは何でしょうか?

4

3 に答える 3

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

これが実用的なフィドルです

于 2013-02-04T06:05:27.290 に答える
1

次のようなクラスで試すことができます

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


});

デモ

于 2013-02-04T06:07:30.557 に答える
0

この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-04T06:02:46.077 に答える