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

Question

问题: 我想在一个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>

提前致谢!

Answer 1

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