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

Posted 2023-05-09

技术标签:

【中文标题】基于类事件的 Jquery 和悬停选择器不起作用【英文标题】：Jquery on and hover selector based on class events not working 【发布时间】：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;

【讨论】：

当我看到 css 时，我不得不投票。很好的捕捉和跳出框框思考:)【参考方案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");
);

这会起作用

【讨论】：

以上是关于基于类事件的 Jquery 和悬停选择器不起作用的主要内容，如果未能解决你的问题，请参考以下文章