Question

我目前的悬停状态是使用“off（）”方法禁用。对于不是我的活动链接的按钮，我似乎无法使用“on（）”重新启用悬停。任何帮助将非常感谢!!

$(".datesmenu li").hover(function () {
        $(this).stop(true, true).animate({
            color: "#88bfdc",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
    }, function () {
        $(this).stop(true, true).animate({
            color: "#fff",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
    });

        $(".datesmenu li").click(function(){

                var index = $(this).prevAll().length;

                for (var i = 0; i <= index; i++) {
                   if (i==index){
                        $('#d' + index).stop(true, true).delay(500).fadeIn("fast"), function () {}
                        $(this).off('hover');
                        $(this).css('color', '#88bfdc');
                        //$(this).removeAttr('href');
                    }
                    else{
                        $(".datesmenu li").not(this).css('color', '#fff');
                        $(".datesmenu li").not(this).on('hover', function(event) {event.preventDefault();});                            
                        $('#d' + i).fadeOut("fast");
                        }
                }
    });

Idrumgood-我无法让你的解决方案工作......我最终不得不使用ubind ..但是，当我使用这种方法时，我在翻转时失去了对动画的缓动......颜色改变但是动画因某种原因被删除了??让我知道你是否有更好更清洁的解决方案，因为这是我能让它工作的唯一方法......

function init(){

  $(".datesmenu li").mouseenter(hoverOn);
  $(".datesmenu li").mouseleave(hoverOut);
}


$(".datesmenu li").click(function () {

var index = $(this).prevAll().length;

for (var i = 0; i <= 6; i++) {
    if (i == index) {
        $('#d' + index).stop(true, true).delay(500).fadeIn("fast"), function () {}
        $(this).css('color', '#88bfdc');
        $(this).unbind('mouseenter').unbind('mouseleave');
    } else {
        $('#d' + i).hide();
        $(".datesmenu li").not(this).mouseenter(hoverOn);
        $(".datesmenu li").not(this).mouseleave(hoverOut);
        $(".datesmenu li").not(this).css('color', '#fff');

     }
   }
 });

function hoverOn(e) {
$(e.target).stop(true, true).animate({
    color: "#88bfdc",
    duration: 200,
    easing: "easeOutExpo",
    complete: function () {}
 });
}

  function hoverOut(e) {
  $(e.target).stop(true, true).animate({
    color: "#fff",
    duration: 200,
    easing: "easeOutExpo",
    complete: function () {}
  });
  }

  init();

Answer 1

当你在$(".datesmenu li").not(this).on('hover', function(event) {event.preventDefault();});上设置悬停事件时，你并没有告诉它做任何事情。它不会只是将先前声明的悬停事件放回去。

抓住您的悬停事件，将它们放入函数中，然后将它们附加到其中。

function hoverOn(e){
        $(e.target).stop(true, true).animate({
            color: "#88bfdc",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
}

function hoverOut(e){
        $(e.target).stop(true, true).animate({
            color: "#fff",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
}

然后当你想重新绑定它时：

$(".datesmenu li").not(this).on('hover', function(event) {hoverOn(event)}, function(event){hoverOut(event)});

使用jQuery 1.7使用悬停在按钮上设置on（）和off（）状态

1 个答案: