0

こんにちは友達は私のコードをここにあります

Jquery

<script>
    $(document).ready(function(){
        $('#sitemap').children('li').addClass('cl');

        $('.cl').mouseenter(function() {
            $(this).css('background','#eee');
            $(this).siblings('li').css('background','');
            $(this).parents().css('background','');
        })

        $('.cl').mouseout(function() {
            $(this).css('background','');
        })
    })
</script>

HTML

<ul id="sitemap">
    <li>
        one
        <ul>
            <li>two</li>
            <li>two</li>
            <li>two</li>
            <li>two</li>
        </ul>
    </li>
    <li>one</li>
    <li>one</li>
</ul>

私は自分の問題を解決する方法を混乱させています。実際には、背景色が変わるときmouseenter()に単純な効果<li>が必要です。しかし、ネストされたリストを使用すると、うまく機能しません。ユーザーがliにカーソルを合わせると、背景色が変わります。

私を助けてください

前もって感謝します ：）

4

6 に答える 6

3

これには JavaScript は必要ありません。CSS を使用してください。

  #sitemap li {
  background-color:white;
  }

  #sitemap li:hover {
  background-color:red;
  }

必要な他のセレクターを追加することもできます。

于 2012-04-18T12:56:37.727 に答える
1

標準モードで IE6 をサポートする必要がない場合は、CSS だけでこれを行うことができます。

.cl:hover {
    background: #eee;
}

JavaScript は必要ありません。残念ながら、IE6 は要素のみを尊重:hoverします。aまた、IE7 で正しく動作させるには、標準 (癖ではない) モードにする必要があることに注意してください。

更新：以下のコメントに基づいて：

問題は、ネストされたリストを使用すると、このコードがネストされたすべての<li>背景色を変更することです

liトップレベルliの背景色を設定すると、それとその子孫要素が色付けされるため、よりも具体的なものを強調表示したいように思えます（オーバーライド色がない場合、この場合は見苦しくなります）を含む最初のアイテムのul)。私は構造を変更すると思います：

<ul id="sitemap">
    <li>
        <div>one</div>
        <ul>
            <li><div>two</div></li>
            <li><div>two</div></li>
            <li><div>two</div></li>
            <li><div>two</div></li>
        </ul>
    </li>
    <li><div>one</div></li>
    <li><div>one</div></li>
</ul>

...そして、次の CSS を使用します。

#sitemap div:hover {
    background: #eee;
}

実例| ソース

于 2012-04-18T12:56:50.853 に答える
1

次のコードを使用しUpdateてくださいjquery

$(function() {
    $("#sitemap").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#FFF"); 
        });
    });
});​

この Jsfiddle を参照してください: http://jsfiddle.net/v4CL5/

これがお役に立てば幸いです

于 2012-04-18T13:06:31.443 に答える
0

関数は DOMの1 レベルだけ下に移動するため、セレクターはIDのすぐ下にある要素.children()のみに一致します。代わりに関数を使用して、DOM のどのレベルにあるかに関係なく、その要素内のすべての要素に一致させます。<li><ul>sitemap.find()<li>

そうは言っても、HTML にアクセスできるのに、なぜ jQuery を使用してクラスを追加しているのか、よくわかりません。

于 2012-04-18T12:55:23.453 に答える
0

ただ変える

$('#sitemap').children('li')

の中へ

$('#sitemap li')

リストの直接の子をchildren()探しているので（サブネストされたリスト項目も探していません）#sitemap

于 2012-04-18T12:56:32.383 に答える
0

これで始められるはずですが、子の 'ul li' をすべてオフにしなければならなかったのは少し不格好だと思います。

http://jsfiddle.net/Ashenkase/weHBT/

于 2012-04-18T13:32:17.663 に答える