使用jQuery在悬停时向li元素的子元素添加类答案

【问题标题】：Add class to child of li element on hover with jQuery使用jQuery在悬停时向li元素的子元素添加类
【发布时间】：2012-06-01 06:42:43
【问题描述】：

问题： 我想在 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>

提前致谢！

【问题讨论】：

标签： jquery html hover html-lists addclass

【解决方案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

【讨论】：

如果
父级有 class="active"，我想将类“icon-white”添加到 元素，我该怎么办？

我已经更新了代码来说明我的意图。换句话说，在文档加载时，jQuery 应该找到一个

并为它的子 元素添加“icon-white”到类中。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以这样做 ->

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

如何向i 添加类？

如何向`i` 添加类？