調用的.css（）函數禁用懸停

所以我有這樣的懸停代碼：調用的.css（）函數禁用懸停

function shortHover(elem){ 
    $('body').delegate(elem, 'hover', 
      function() { 
       $(this).css("background-color", "#f0c723;") 
      }, 

      function(){ 
       $(this).css("background-color", "#00ed00;") 
      } 
    ) 
    } 

    shortHover("#for_width_my_added"); 
    shortHover("#for_width_my_published"); 
    shortHover("#for_width_my_unpublished");

而且比，在點擊這些元素之一：

$("#for_width_my_added").css("background-color", "#00ed00"); 
$("#for_width_my_published").css("background-color", "#00ed00"); 
$("#for_width_my_unpublished").css("background-color", "#00ed00"); 
$("#for_width_<%= @output[0] %>").css("background-color", "#f0c723");

於是就點擊了分配給元素綠色，當前點擊 - 懸停顏色，所以一個元素可以永久具有這些顏色。

問題是點擊元素後停止對懸停進行反應。儘管我使用了委託。爲什麼？

來源

2013-05-07 Joe Half Face

你不能在'hover'中使用'delegate'，這不是一個真實的事件。 'delegate'只允許爲單個事件提供一個處理函數。 '.hover（）'是綁定'mouseIn'和'mouseOut'處理程序的jQuery速記。 – Barmar 2013-05-07 00:23:08

你的問題是，jQuery的hover不是一個真正的JavaScript事件，而只是一個jQuery事件或簡寫爲$(selector).mouseenter(handlerIn).mouseleave(handlerOut);。您可以使用它代替：

function shortHover(elem) { 
    $('body').delegate(elem, 'mouseover mouseout', 
    function (e) { 
     if (e.type == 'mouseover') { 
      $(this).css("background-color", "#f0c723"); 
     } else if (e.type == 'mouseout') { 
      $(this).css("background-color", "#00ed00"); 
     } 
    }); 
} 

shortHover("#for_width_my_added"); 
shortHover("#for_width_my_published"); 
shortHover("#for_width_my_unpublished"); 

$("#for_width_my_added").css("background-color", "#00ed00"); 
$("#for_width_my_published").css("background-color", "#00ed00"); 
$("#for_width_my_unpublished").css("background-color", "#00ed00"); 
$("#for_width_<%= @output[0] %>").css("background-color", "#f0c723");

這裏還有一個jsFiddle

除非你使用jQuery的舊版本，你不應該使用.delegate()但使用.on()而是因爲它已經取代了.delegate()。

來源

2013-05-07 00:24:30

非常感謝） – 2013-05-07 00:34:20

調用的.css（）函數禁用懸停

回答

相關問題