0

jQUEry でロールオーバー効果を作成しようとしています。私は似たようなことをしていますが、リンクが含まれているオブジェクトでマウスオーバーをしようとしているため、問題が発生しています。

レベル 2 のナビゲーション バーがあります。プレースホルダーは表のセルです (悪いことはわかっていますが、既にこの方法で行われています)。背景を白（#FFF）から濃いグレー（#999）に変更したいです。また、テキストを濃い灰色から白に変更したいと思います。

テキストはリンクであるため、link タグ内でクラスを指定して、下線のない濃い灰色であり、デフォルトで下線付きの青色のテキストにならないようにする必要があります。

私が書いたコードは、class="subLink" のすべてのリンクが、それらのいずれかが「ホバー」されると、グレーから白に変わります。問題の特定のアイテムに対してのみこれが発生するようにしたい-つまり、背景が灰色になり、リンクが白くなるはずです。

HTML と jQuery は以下のとおりです。

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td>
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td>
<td class="subMenuTD"><a href="events.html">Events</a></td>

$(".subMenuTD").hover(
                  function() { 
                     $(this).addClass("subMenuTDActive");
                     $(".subLink").addClass("subLink-white");
                  },
                  function() {      
                     $(this).removeClass("subMenuTDActive");
                     $(".subLink").removeClass("subLink-white");
          }
               );
4

5 に答える 5

3

$() 関数にコンテキスト パラメーターを追加します。

$(".subLink")--> $(".subLink", this)jQuery は、指定されたコンテキスト要素の子である ".subLink" のみに一致します。

于 2009-07-23T08:42:53.060 に答える
2

親 td に既にクラスを追加しているため、クラスをリンクに追加しないことでこれをさらに簡単にすることができ、CSS を使用してリンクをターゲットにすることができます。

前のコード

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");                                
     $(".subLink").addClass("subLink-white");
  },
  function() {
     $(this).removeClass("subMenuTDActive");                                
     $(".subLink").removeClass("subLink-white");
  }
);

後のコード

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");     
  },
  function() {
     $(this).removeClass("subMenuTDActive");    
  }
);

新しい CSS ルール

.subMenuTDActive .subLink {
   /* Add hover link styling here */
}

「.subMenuTDActive .subLink」は「.subLink」よりも高い特異性を持ち、「.subLink」ルールをオーバーライドするため、これは機能します。

于 2009-07-23T08:49:44.900 に答える
1

私はドリトマを患っています。CSSしか使えないのに、なぜJavaScriptを使っているのですか？

 .subMenuTD:hover {
                   background-color: #ccc;
                   }

 .subLink:hover {
                 color: #fff;
                 }

または、さらに良い (私が思うに) td 要素のスタイリングを削除し、リンクを display:block として設定すると、1 つの要素の下でホバー スタイルを宣言できます。

 .subLink {
          display: block;
          }

  .subLink:hover {
                 background-color: #ccc;
                 color: #fff;
                 }

そして、HTML を制御できない場合や、マークアップが同じままであることに依存するミッション クリティカルなものがある場合を除き、「既にテーブルを使用しています。わかっているので、私を訴えてください」という言い訳にはなりません。これがあなたのサブメニュー、sans tableです：

<ul class="subMenu">
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="news_archive.html">News Archive</a></li>
<li><a href="events.html">Events</a></li>
</ul>

それには約30秒かかりました。navbar/rollover の CSS は次のとおりです。

 .subMenu li {
          display: inline;
          list-style: none;
          }

  .subMenu a {
          color: #000;
          background-color: #fff;
          text-decoration: none;
          display: block;
          }

   .subMenu a:hover {
          color: #fff;
          background-color: #ccc;
          }

見栄えを良くする必要があったため、1 分以上かかったかもしれません。

私はいじめっ子になろうとしているわけでも、あなたを非難しようとしているわけでもありませんが、非セマンティック コードは奨励されるべきものではありません。準拠していないサイトで使用すること。

于 2009-07-23T09:10:35.873 に答える
0

AKX のソリューションを使用するか、次の方法を使用できます。

$(".subMenuTD").hover(
                    function() { 
                            $(this)
                               .addClass("subMenuTDActive")
                               .children(".subLink")
                               .addClass("subLink-white");
                    },
                    function() {            
                            $(this)
                                .removeClass("subMenuTDActive");
                                .children(".subLink")
                                .removeClass("subLink-white");
                    }
            );
于 2009-07-23T08:50:57.397 に答える
0

AKXのソリューションは正しいです。または、次のこともできます。

$(this).children(".subLink")
于 2009-07-23T08:53:42.147 に答える