Question

我想抓住位于其他元素下的元素的鼠标事件。

以下是我的例子：http://jsfiddle.net/KVLkp/13/

现在我想要的是当鼠标在红色方块上时蓝色方块有黄色边框。

重要的是：

他们是图像。所以没有办法在其中嵌入一个元素其他
这是一个简单的例子，但实际上有很多img。所以通过坐标计算搜索悬停元素不是我的解决方案（我已经找到了这个答案）
两个图像之间没有链接，只是鼠标在它们之上

感谢您的帮助

编辑：我已经为我的一般案例写了一个更完整的例子： - DOM中的img顺序不固定，可以在实时更改 - 顶部和底部图像具有不同的大小和位置

感谢大家！

Answer 1

您可以尝试以下方面的内容：

<style>
img.hover {
    border-color : yellow;
}
</style>
<script>
$('img').mouseenter(function () {
    $(this).addClass("hover");
}).mouseleave(function (e) {
    var next = e.relatedTarget;
    if (next.tagName.toUpperCase()!="IMG"
                 || $(next).hasClass("hover"))
       $(this).removeClass("hover");
});
</script>

我没有直接设置边框的颜色，而是定义了一个名为“hover”的类来设置颜色，这样我就可以轻松测试给定元素是否具有边框，而不是硬编码颜色，然后我我已经利用event.relatedTarget属性来查看鼠标离开时的位置。

只有当鼠标所在的元素不是图像或者是已经具有悬停类的图像时，才会删除“悬停”类。在这个演示中似乎工作得很好：http://jsfiddle.net/KVLkp/18/，但是如果两个图像并排在它们之间没有间隙或者顶部的图像没有完全“包含”（在由img重叠的坐标感觉 - 我决定继续发布它，因为我希望在演示中看到event.relatedTarget会给你足够的开始来提出适合你真实情况的东西。

（注意：“hover”是一个类的坏名称，因为CSS已经有:hover伪类，但到了我记得的时候，我无法在小提琴和这里改变它。）

Answer 2

我认为你使事情变得更加困难。只需简单地将事件放在内部正方形和外部正方形上，但不要使用“this”使用id来获取外部正方形，例如$（'＃bluesqure'）然后就像悬停在蓝色方块上一样做你的工作。

我不知道这是否是您现实世界中可能的解决方案。

覆盖/覆盖/堆叠元素上的Javascript鼠标事件

2 个答案: