jQuery悬停事件不起作用

Question

我有一个网站，里面有一些带有隐藏的div的div。 我想做的是当我将鼠标悬停在父div上时显示隐藏的div。 我不能使用CSS3的:hover因为我需要支持ie6。 所以我用了jQuery。 这对我不起作用。

这是一个示例： JSFiddle

$('#front-container').on("hover", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

这就是它在悬停时的外观： JSFiddle

#jobs-by-cat div是动态更改的，因此必须像这样进行选择。

Answer 1

没有称为hover事件， .hover（）函数是注册mouseenter和mouseleave事件处理程序的快捷方式，因此您需要使用它

$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

演示： 小提琴

Answer 2

根据.on的jQuery 文档 ：

在jQuery 1.8中已弃用， 在1.9中已删除 ：名称“ hover”用作字符串“ mouseenter mouseleave”的简写。 它为这两个事件附加一个事件处理程序，并且处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。 不要将“ hover”伪事件名称与.hover（）方法混淆，该方法接受一个或两个函数

因此，您需要替换为mouseenter和mouseleave事件：

$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

Answer 3

尝试使用“ mouseenter”和“ mouseleave”事件。

$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});