0

私はどこでも検索しましたが、すべてが私が求めているものを回避しているようで、自分でこれを行うのに十分な学習をしていないので、どこかにある場合や愚かな質問がある場合は申し訳ありません.

これは以下の私の現在の構造です：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="select"></li>

    <li><a href="#">Services</a></li>
    <li class="noselect"></li>

    <li><a href="#">Gallery</a></li>
    <li class="noselect"></li>

    <li><a href="#">About Us</a></li>
    <li class="noselect"></li>

    <li><a href="#">Contact Us</a></li>
    <li class="noselect"></li>
  </ul>
</nav>

私が望むのは、リンクがホバーされたとき、それに続く「li」のクラスが「select」に変更され、他のすべてが「noselect」に設定されていることです。

私が言いたいことを理解できるように、jsfiddle を含めました。（ここにあります）

前もって感謝します、スイフト

4

4 に答える 4

2

JavaScriptに頼らずにこれを行うことができます。プレーンCSSで：

nav:hover .select {
    background:#ff0000;
}

nav li:not(.select):hover +  li {
    background:#000;
}

ここにフィドルがありますhttp://jsfiddle.net/2Ua2a/9/

ただし、おそらく次のように単純化します。http://jsfiddle.net/58gNm/2/ - html をきれいに保つだけです。

于 2012-12-09T17:46:35.863 に答える
1 
$('li a').on('mouseenter mouseleave', function() {
    $(this).closest('li').next('li').addClass('select')
           .siblings('li').removeClass('select');
});​

フィドル

2 つのクラスを切り替える必要はありません。selectクラスがクラスよりも具体的なセレクターを持っていることを確認するだけnoselectで、それがオーバーライドされます。

于 2012-12-09T17:30:47.837 に答える
1

このフィドルを確認してください：

http://jsfiddle.net/BuddhiP/2Ua2a/6/

$(function() {
    $('a').on('hover', function() { $(this).parent().next('li').toggleClass('select noselect') }); 
});​
于 2012-12-09T17:35:38.100 に答える
0

どうぞ：

$('a').on('hover', function(){
   var $parent = $(this).parent('li');

    $parent.siblings('li.select').removeClass('select').addClass('noselect');
    $parent.next('li').removeClass('noselect').addClass('select');
});​

コードは簡単です。リンクにカーソルを合わせると、関数が実行されます。最初に、親を変数として宣言しliます。これは、読みやすく、パフォーマンスがわずかに優れているためです。

次に、現在 -class を持つ兄弟をターゲットにして、.select選択を解除します。最後に、クラスを直後の に追加するだけliです。

フィドルを参照してください: http://jsfiddle.net/2Ua2a/5/

于 2012-12-09T17:38:43.423 に答える