Question

我正在尝试做什么

我有一个列表（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功能优先于mouseout功能的hover部分？

Answer 1

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

Answer 2

似乎只是在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);
    }
})

在.active函数的mouseover和mouseout部分之间添加hover类时，我向{{1}添加了if语句函数，用于查看在光标进入元素期间是否添加了类mouseout。

悬停功能生效时无法添加类

我正在尝试做什么

我遇到的问题

2 个答案: