需要另一個點擊鼠標懸停功能

我想在頁面的頂部，一旦點擊，使一個酒吧，允許用戶通過鼠標在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和其他一些東西，但是我錯誤地將它應用於父元素。 –

需要另一個點擊鼠標懸停功能

回答

相關問題