Question

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

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

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

有没有办法测试是否有任何一个元素悬停并触发一个函数（如果有的话）？像这样：

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

OR

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

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

Answer 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 */ });

Answer 2

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

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

Answer 3

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

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

应该有效。。

检查此元素或此元素是否与jQuery一起盘旋

3 个答案: