jQuery 中的悬停功能不起作用

Question

我有四个 li div 里面有一个 link 图像 (所以它们是四个 link 和四个图像 )，但我不明白为什么悬停功能在这里不起作用。

错误是：

element.hover isn't a function:

var element =$("li div")
var element_link = element.find("a");
var element_img = element.find("img");
element_img.css("opacity","0.5");
element_link.each(function(index, element) {
    element.hover(
    function(){element_img[index].animate({opacity:1}),250},
    function(){element_img[index].animate({opacity:0.5}),250}
    );
});

我该如何解决这个问题？

Answer 1

您不需要对 jQuery 个元素的集合使用 each()。您可以简单地使用以下代码将悬停应用于所有 element_links:

element_link.hover(
  function(){$(this).siblings('img').animate({opacity:1}),250},
  function(){$(this).siblings('img').animate({opacity:0.5}),250}
);

Answer 2

我是这样解决的：

var element =$("li div");
var element_link = element.find("a");
var element_img = element.find("img");
element_img.css("opacity","0.5");

element_link.each(function(index, element) {
    $(element).hover(
   function(){$(element_img[index]).animate({opacity:1},250)},
   function(){$(element_img[index]).animate({opacity:0.5},250)}
);
});

也感谢 Wolf 和 Amit（动画功能也有错误）。

jQuery 中的悬停功能不起作用

Hover function in jQuery doesn't work

jquery

hover