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');
    });
});

DEMO 1

Also can write (Its better)

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

DEMO 2

Using jQuery .on() hover:

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

DEMO 3

According to comment

How do I add class to i?

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

ans similarly for .removeClass() or .toggleClass().

According to edit

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

DEMO 4

Combining with hover:

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

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

DEMO 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

You could do something like ->

$(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事件中......就像 -

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

如果您有任何疑问，请随时提问 :) 编码快乐！！！！

于 2012-06-01T07:21:39.823 回答