使用jQuery在hover上添加类到li元素的子元素

Question

问题： 我希望在一个li元素的子元素中添加一个类。

HTML code：

<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>

提前致谢！

Answer 1

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

<强> DEMO 1

也可以写（更好）

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

<强> DEMO 2

使用jQuery .on() 悬停：

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

<强> DEMO 3

根据评论

如何将课程添加到i？

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

同样适用于.removeClass()或.toggleClass()。

根据编辑

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

<强> DEMO 4

结合悬停：

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

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

<强> DEMO 5

Answer 2

您可以执行类似 - ＆gt;

的操作

$(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
      }
   )
 });

Answer 3

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

Answer 4

你正在以正确的方式......你只需要删除“function（）{$（this）.removeClass（'icon-white'）}”并将其放入mouseout事件.. like -

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

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