jquery - 需要再次单击鼠标悬停功能

Question

我正在尝试在页面顶部制作一个点击后的栏，允许用户通过将鼠标悬停在 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");
    });
});

Answer 1

您需要以某种方式解除鼠标悬停事件的绑定。一种方法：

将您的配置更改为：

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)
}