0

所以我有这个悬停代码：

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

因此，单击分配给绿色的元素，并且当前单击 - 悬停颜色，因此一个元素可以永久具有这些颜色。

问题是点击元素后停止对悬停做出反应。即使我使用了委托。为什么？

4

1 回答 1

1

您的问题是 jQueryhover不是真正的 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-07T00:24:30.553 回答