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()。

调用.css（）函数禁用悬停

1 个答案: