javascript - 悬停事件上的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

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

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() 方法混淆，后者接受一两个函数

所以你需要用 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');
});