1

問題： ホバーされたときにli要素の子にクラスを追加したいと思います。

HTMLコード：

<li class="active">
    <a href="index.html" title="Homepage">Homepage<i class="icon-home"></i></a>
</li>

jQueryコード：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('li[ class="active" ]').hover(
            function(){ $(this).addClass('icon-white') },
            function(){ $(this).removeClass('icon-white') }
        )
    });
</script>

望ましい結果：

<li class="active">
    <a href="index.html" title="Homepage">Homepage<i class="icon-home icon-white"></i></a>
</li>

特定の要素にクラスを追加するためのコード：

<script type="text/javascript">
    $(document).ready(function()
    {           
        if ($('#main-nav > li').hasClass('active') == true)
        {
            $("a > i", this).addClass('icon-white');
        }
    });
</script>

更新（最終的な解決策）：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#main-nav li').hover(function() 
        {
            if ($(this).hasClass('active') != true)
            {
                $('a', this).find('i').toggleClass('icon-white');   
            }
        });

        $("#main-nav li.active > a > i").addClass('icon-white');
    });
</script>

前もって感謝します！

4

4 に答える 4

7 
$(document).ready(function() {
    $('li.active').hover(
    function() {
        $('a', this).addClass('icon-white');
    }, function() {
        $('a', this).removeClass('icon-white');
    });
});

デモ1

書くこともできます（もっといいです）

$('li.active').hover(
function() {
    $('a', this).toggleClass('icon-white');
});

デモ2

jQuery.on()ホバーの使用：

$(document).ready(function() {
    $('li.active').on('hover',
    function() {
        $('a', this).toggleClass('icon-white');
    });
});

デモ3

コメントによると

クラスを追加するにはどうすればよいiですか？

$('i', this).addClass('icon-white');

.removeClass()またはについても同様です.toggleClass()。

編集によると

$(document).ready(function(){          
     $("li.active > a > i").addClass('icon-white');
});

デモ4

ホバーとの組み合わせ：

$("li.active > a > i").addClass('icon-white');

$('li.active').hover(
function() {
    $('a', this).toggleClass('icon-white');
});

デモ5

于 2012-06-01T06:44:29.583 に答える
2 
$('li.active').hover(function() {
  $(this).find('a').toggleClass('icon-white') 
});
于 2012-06-01T06:47:36.413 に答える
1

あなたは次のようなことをすることができます->

$(document).ready(function()
  {
    $('li.active').hover(
      function(){ 
        $(this).children("a").addClass("icon-white"); //Add an active class to the anchor
      },
      function() {
        $(this).children("a").removeClass("icon-white"); //Remove an active class to the anchor
      }
   )
 });
于 2012-06-01T06:44:41.680 に答える
1

あなたは正しい方向に進んでいます...あなたはただ"function（）{$（this）.removeClass（'icon-white'）}"を削除し、それをmouseoutイベントに入れる必要があります..like-

$(".active").hover(function () { $(".active a").addClass('icon-white'); }); $(".active").mouseout(function () { $(".active a").removeClass('icon-white'); });

ご不明な点がございましたら、お気軽にお問い合わせください:)ハッピーコーディング!!!!

于 2012-06-01T07:21:39.823 に答える