悬停功能生效时不能添加类

Can't add class while Hover function is in effect

本文关键字：不能 添加 功能 悬停      更新时间：2023-09-26

我想做什么

我有一个列表(ul#portfoliolist)，其中每个项目是一个不同的导航项。

当用户将鼠标悬停在任何项目上时，不透明度从0.65变为1，右填充从0变为10px。当用户将鼠标移开时，这些将被反转:

$('ul#portfoliolist>li:not(.active)').hover(function(){
    $(this).stop().animate({paddingRight:'10px',opacity:1},100);
},function(){
    $(this).stop().animate({paddingRight:0,opacity:0.65},300);
})

如果用户单击列表项，它将从任何其他列表项中删除类active，并将类active添加到所单击的元素中:

$('ul#portfoliolist>li').click(function(){
    $('ul#portfoliolist>li').removeClass('active');
    $(this).addClass('active');
    //var item = $(this).attr('data-portfolio');
    //$('div.portfolio').css({backgroundImage:'url(img/portfolio_'+item+'.png)'})
})

我遇到的问题

虽然这两个功能单独工作得很好，但当它们结合在一起时，我无法同时做到这两点——只有悬停效果是成功的。

当我将鼠标悬停在上面时，所需的动画可以工作，但是当我将光标移开时，次要的悬停函数会发生，并且会覆盖.active css。

如何使click函数优先于hover函数的mouseout部分?

$('ul#portfoliolist>li:not(.active)').hover(function(){
    $(this).stop().animate({paddingRight:'10px',opacity:1},100);
},function(){
    if($this).hasClass('active'){
        return;
    }
    $(this).stop().animate({paddingRight:0,opacity:0.65},300);
})

似乎只是把这个写在StackOverflow上就足够清楚了，我可以自己找到一个解决方案:

$('ul#portfoliolist>li:not(.active)').hover(function(){
    $(this).stop().animate({paddingRight:'10px',opacity:1},100);
},function(){
    if($(this).hasClass('active')){
        $(this).stop().animate({paddingRight:0},300);
    } else {
        $(this).stop().animate({paddingRight:0,opacity:0.65},300);
    }
})

由于在hover函数的mouseover和mouseout部分之间添加了.active类，因此我在mouseout函数中添加了if语句，以查看在游标进入元素的时间内是否添加了.active类。

相关文章：