调用的.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（）函数禁用悬停

回答

相关问题