Question

我有一个导航菜单，在悬停时（使用hoverIntent插件和tweenmax进行动画处理）将div替换为相关的背景图像。我把这一切都搞好了，但是我所知道的是如何防止在当前选中的元素上重复该动作。因此，例如，如果您将鼠标悬停在第一个上方然后将其悬停，我不希望再次将鼠标悬停在该视图上时重复该操作，因为它已被选中。附件是我的小提琴http://jsfiddle.net/olichalmers/5csofnhz/1/

var homeNav = function () {
    var tgt = $(this);

    $("#homeImageNav a ").hoverIntent({
        over: homeNavOver,
        out: homeNavOff,
        interval: 0
    });

    function homeNavOver() {

        var tgt = $(this);
        var bgHold = $("#bgHolder");
        var bg = tgt.attr('data-bg');

        if (!tgt.hasClass('current')) {
            TweenMax.set($("#bgHolder"), {
                opacity: 0,
                background: bg,
                scale: 1.1
            });
            TweenMax.to(bgHold, 1.5, {
                opacity: 1,
                scale: 1,
            });
        }
        //tgt.addClass('current');
    }

    function homeNavOff() {
        //if (tgt.hasClass('current')) {
        //tgt.removeClass('current');
        //}
    }
};

这是homeNav功能。

Answer 1

您只需要对您的功能进行更改 - homeNavOff就像这样：

function homeNavOff() {
    $('#homeImageNav a').removeClass('current');
    $(this).addClass('current');
}

在此fiddle

上查看此操作

Answer 2

更新了您的Fiddle

我添加的内容是：

存储当前所选链接的一个变量
使用悬停链接检查
如果不相同则执行背景更改
别无所事。
每次链接（一个或两个）悬停时更新

Answer 3

Look on this :
    http://jsfiddle.net/5csofnhz/6/

如果有任何查询可以随意提问

如果当前选择了某些内容，则阻止多个功能

3 个答案: