0 
<div>
  <div id="nav">
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#nav li a").hover(  
        function () { $(this).parent('ul').parent('li').find('a.active').css('background-color', 'Red'); }
      );
    });
  </script>
</div>

ユーザーが他の項目にカーソルを合わせたときに、メニュー項目の背景色を「アクティブ」なクラス名で変更しようとしています。

4

5 に答える 5

3

これを試してみてください：

$(this)
      .parent()  // jump to li
      .parent()  // jump to ul
      .find('li a.active')  // find a.active
      .css('background-color', 'Red'); // apply css

しかし、私はあなたが簡単にできると思います：

$(document).ready(function() {
    $("#nav li a").hover(function() {
        $('li a.active').css('background-color', 'Red');
    }, function() {
        // if you want to remove background
        // on mouse out then uncomment below line
        //$('li a.active').css('background-color', 'transparent');
    })
});

デモ

于 2012-06-17T03:45:00.047 に答える
1

.hover() でそれを行う方法は次のとおりです

http://jsfiddle.net/nickadeemus2002/ePDZH/

ユーザーがリンク上にいるときにのみ赤い背景を表示したいと思うので、hoverOut を処理するコードも追加しました。デモを好きなように編集してください。

于 2012-06-17T03:49:53.310 に答える
0

すでにこの機能の範囲を #nav div に設定しているため、.active アンカー タグの検索範囲をそのコンテナに設定することで、すべてを簡素化できます。

// cache the jquery object
var $navDiv = $("#nav");

$("#nav li a").hover( function () {
    $navDiv.find("a.active").css("background-color", "red");
});

これにより、メニュー項目のいずれかにカーソルを合わせると背景色が設定されますが、マウスがメニュー項目から離れる (ホバリングしなくなる) と、背景は赤のままになります。ホバー ハンドラー関数内の .active アンカー タグでクラス名を切り替えることをお勧めします。

//cache the jquery object
var $navDiv = $("#navDiv");

$("#nav li a").hover(function (){
    $navDiv.find("a.active").toggleClass("redBackground");
});
于 2012-06-17T04:13:15.927 に答える
0

私の考えは、子要素をホバリングしている間にovertoのクラスを追加し、それに応じて CSS でスタイリングすることです。#nava

JavaScript: (jQuery が必要)

(function($){

  $nav = $("#nav");
  $nav.on("mouseenter", "a", function(){
    $nav.toggleClass("over");
  }).on("mouseleave", "a", function(){
    $nav.toggleClass("over");
  });

})(jQuery);

デモ: jsfiddle.net/Marcel/m8jQv/1

于 2012-06-17T04:37:49.033 に答える
0

問題はULの親ではありません<a>。parents()またはを使用しclosest()ます。直接の親はLI

http://api.jquery.com/parents/

http://api.jquery.com/closest/

于 2012-06-17T03:46:37.220 に答える