JQuery - 如果您不是 .hover 这个 div，请执行此操作

Posted 2023-05-08

【中文标题】JQuery - 如果您不是 .hover 这个 div，请执行此操作

【英文标题】：JQuery - Do this if you're NOT .hover this div

【发布时间】：2011-05-22 03:47:27

【问题描述】：

cardh = 0

$('.cardgreen > img').hover(function () 
    if (cardh == 0) 
        $('.card > img').animate( height: 150, width: 193, opacity: '1', left: 0, top: 9 , 500);
        $('.anfahrtlink').animate( opacity: '0' , 500).animate( width: 0 , 0);
        $('.cardgreen > img').animate( opacity: '0' , 500).animate( opacity: '1' , 500);
        cardh = 1
    
);

$('.cardgreen > img').notanymore().hover(function () 
    if (cardh == 1) 
        $('.cardgreen > img').animate( opacity: '0' , 300);
        $('.anfahrtlink').animate( width: 84 , 0).animate( opacity: '1' , 500);
        $('.card > img').animate( opacity: '1' , 300).animate( opacity: '0', width: 0, height: 0, left: 194, top: 75, 270);
        cardh = 0
    
);

JQuery 怎么说：当你不再悬停 div > img 时，做第二件事..？

【参考方案1】：

传递给.hover() 的第二个函数是mouseleave 处理程序，如下所示：

$('.cardgreen > img').hover(function() 
  $('.card > img').animate(height: 150, width: 193, opacity: '1', left: 0, top: 9,500)
  $('.anfahrtlink').animate(opacity: '0',,500).animate(width:0,0);
  $('.cardgreen > img').animate(opacity: '0',500)
                       .animate(opacity: '1',500);
, function() 
    $('.cardgreen > img').animate(opacity: '0',300);
    $('.anfahrtlink').animate(width:84,0).animate(opacity: '1',,500)
    $('.card > img').animate(opacity: '1',300)
                    .animate(opacity: '0', width: 0, height: 0, left:194, top:75,270);
);

.hover() 需要 2 个处理程序 - 对于 mouseenter 和 mouseleave，或者像你一样，一个处理两者的处理程序。但既然你想悬停“进出”行为……请使用 2 处理程序版本。

【讨论】：

@Mr.Freeman - 不应该这样，你有示例页面吗？

【参考方案2】：

jQuery .hover() 方法可以接受 2 个参数（参见此处：http://api.jquery.com/hover/）。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

handlerIn(eventObject) - 当鼠标指针进入元素时执行的函数。 handlerOut(eventObject) - 当鼠标指针离开元素时执行的函数。