基于类事件的 Jquery 和悬停选择器不起作用答案

【问题标题】：Jquery on and hover selector based on class events not working基于类事件的 Jquery 和悬停选择器不起作用
【发布时间】：2015-09-20 20:12:36
【问题描述】：

$(".typeofcontent").on({

    $(".typeofcontent").hover(function() {
        $(this).css("color", "#f9d58e");    
    });

}

此 jQuery 代码不执行设置类名为 typeofcontent 的元素的 CSS 颜色的命令。相反，它没有给出控制台错误代码并且根本不执行。你介意解释一下我做错了什么吗？

【问题讨论】：

【解决方案1】：

只需要以下代码。由于hover 事件由hover() 绑定，所以不需要on。

$(".typeofcontent").hover(function() {
    $(this).css("color", "#f9d58e");
});

更好的方法

您不需要 Javascript 来执行此操作。 使用 CSS

.typeofcontent:hover {
    color: #f9d58e;
}

【讨论】：

【解决方案2】：

您传入的对象不是on() 的有效重载。如果您希望在事件、选择器（f或委托）和回调中使用on()

$(document).on('hover','.typeofcontent', function(){
    $(this).css("color", "#f9d58e");
});

【讨论】：

【解决方案3】：

jquery .on 函数的一般语法是 .on("event","child selectors","data","event handler")。第二和第三个参数是可选的，所以你可以跳过它们。

在您的情况下，此处的“事件”输入代码作为无效对象传递。所以正确的用法是

$(".typeofcontent").on("hover", function() {
    $(this).css("color", "#f9d58e");
});

【讨论】：

【解决方案4】：

jQuery(document).ready(function() {
    $(".typeofcontent").hover(function() {
        $(this).css("color", "#f9d58e");
    });
});

【讨论】：

【解决方案5】：

$(".typeofcontent").hover(function(){
    $(this).css("color", "#f9d58e");
});

如果您想使用悬停功能，上述代码足以完成工作。但是，如果你想用“on”来做，sn-p 是：

$(".typeofcontent").on('mouseover',function(){
    $(this).css("color", "#f9d58e");
});

【讨论】：

【解决方案6】：

$(".typeofcontent").hover(function() {
    $(this).css("color", "#f9d58e");
});

这会起作用

【讨论】：