调用.css()函数禁用悬停

Question

所以我有这个悬停代码:

  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");

所以当点击元素上的绿色时，当前点击-到悬停的颜色，所以一个元素可以永久地拥有这些颜色。

问题是，点击元素后，停止反应悬停。尽管我用了委托。为什么?

Answer 1

你的问题是，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()。