需要另一个点击鼠标悬停功能

我想在页面的顶部，一旦点击，使一个酒吧，允许用户通过鼠标在div上更改页面的背景颜色。问题是，这个小节会无限期地保持活动状态，这样如果用户无意中再次将小节放在小节上，颜色将会改变。需要另一个点击鼠标悬停功能

我希望用户不得不再次单击才能重新激活鼠标悬停功能。

我有一个在jsfiddle上使用的简化版本。

下面是脚本：

$(function() { 
    config = { 
     sensitivity: 3, 
     interval: 200, 
     timeout: 500, 
     over: function() { 
      $('#colorBar').animate({ 
       "height": "50px" 
      }, 500); 
     }, 
     out: function() { 
      $('#colorBar').animate({ 
       "height": "20px" 
      }, 200); 
     } 
    } 
    $('#colorBar').hoverIntent(config) 
}); 

$("#colorBar").click(

function() { 
    $("#red").mouseover(

    function() { 
     $("body").css("background-color", "red"); 
    }); 
    $("#green").mouseover(

    function() { 
     $("body").css("background-color", "green"); 
    }); 
    $("#blue").mouseover(

    function() { 
     $("body").css("background-color", "blue"); 
    }); 
    $("#yellow").mouseover(

    function() { 
     $("body").css("background-color", "yellow"); 
    }); 
});

来源

2012-08-22 Jesse Schoff

你怎么知道当用户选择了牢固颜色，而不是仅仅通过他们甩？你可以尝试在每个调用'$ .unbind（'mouseover'）的mouseover中去掉相同的函数' –

你可以像这样简化你的'click'：http://jsfiddle.net/FfpEF/2/ –

很好，谢谢Ricardo 。 –

你需要以某种方式解除绑定您的鼠标悬停事件。做到这一点的方法之一：

改变你的配置到这一点：

config = { 
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) 
    interval: 200, // number = milliseconds for onMouseOver polling interval 
    timeout: 500, // number = milliseconds delay before onMouseOut 
    over: function() { $('#colorBar').animate({"height": "50px"}, 500); }, // function = onMouseOver callback (REQUIRED) 
    out: function() { $('#colorBar').animate({"height": "20px"}, 200); $('.color').unbind("mouseover"); } // function = onMouseOut callback (REQUIRED) 
}

来源

2012-08-22 04:25:11

优秀！感谢您的简单答案。我曾尝试过.unbind和其他一些东西，但是我错误地将它应用于父元素。 –

需要另一个点击鼠标悬停功能

回答

相关问题