检查此元素或此元素是不是悬停在 jQuery 上

Posted 2023-05-08

【中文标题】检查此元素或此元素是不是悬停在 jQuery 上

【英文标题】：check if this element OR this element is hovered with jQuery检查此元素或此元素是否悬停在 jQuery 上

【发布时间】：2013-12-03 07:18:34

【问题描述】：

我的 DOM 中有两个单独的元素，当其中一个元素悬停时需要更改。当链接悬停时，图像 src 需要更改（简单）并且链接颜色需要更改。当图像悬停时，需要发生相同的效果（图像 src 更改 & 链接颜色更改）

这实际上很容易做到，但我觉得有一种比我正在采用的方法更容易做到的方法。目前，我正在浏览 8 个元素中的每一个，并测试它们是否单独悬停。这很好用，但这里的 jQuery 比我认为的要多得多。

我尝试将属性 onmouseover 添加到两个元素并触发相同的功能，但由于某种原因该功能没有触发。

有没有办法测试任何一个元素是否悬停并在其中一个悬停时触发功能？像这样的：

if($(#elm1).hover() || $('#elm2').hover()) 
    //effect here

或

if($('#elm1').is(':hover') || $('#elm2').is(':hover')) 
    //effect here

我尝试了上面的示例代码，但没有得到任何结果。有没有办法做到这一点，还是我坚持检查每个单独的元素？

【问题讨论】：

var isHovered = $('#elem').is(":hover");返回布尔值

当你执行 hover() 并检查 .hovered 时，为什么不添加像 hovered 这样的类：)

因为我猜 jQuery 已经存储了那个状态，让它加倍不会有任何好处

var isHovered 的东西不起作用，因为我仍然需要单独检查 8 个不同的元素。我正在尝试在同一个函数中检查链接和图像。

【参考方案1】：

它有效，您只是在页面加载时运行它，而不是在鼠标移动时运行它

$(document).mousemove(function()     
    if($('#elm1').is(':hover') || $('#elm2').is(':hover')) 
        // Do stuff
    
    else 
        // Revert do stuff or do other stuff
    
);

Example here

但是，正如其他人所说，jQuery 已经知道hover 状态，所以这样做是不必要的。在实践中，您应该使用相同的选择器将函数应用于它

$('#idOne, #idTwo').hover(function()  /* Do stuff */ );

【讨论】：

哦，呵呵。这正是我需要的。我不知道为什么我自己没有想到这一点。谢谢！我会接受答案

它会在每个mousemove事件上选择元素，不是很有效，你应该先选择它们并使用变量。您也可以在该元素上收听 mouseenter 和 mouseleave。

@neatcoding 同意！这是我第一次学习编程时的一篇相当老的帖子。此外，无论如何，第二种方法更好

【参考方案2】：

我会在鼠标悬停时注册事件，每当事件发生时触发一个函数

$("#elm1, #elm2").on("mouseover", function () 
    // effect here
);

【参考方案3】：

为什么不简单地将处理程序添加到这两个元素：

$('#elm1, #elm2').hover(function()
     // ... do stuff here ...
);

应该可以。 . .