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

Question

我想捕获位于另一个元素下的元素的鼠标事件。

这是我所拥有的示例:http://jsfiddle.net/KVLkp/13/

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

重要的是:

• 它们是图像。所以没有办法在其他。
• 这是一个简单的例子，但实际上有很多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>

我没有直接设置边框的颜色，而是定义了一个名为“悬停”的类来设置颜色，这样我就可以轻松地测试给定元素是否有边框，而无需在任何地方都对颜色进行硬编码，然后我已使用 event.relatedTarget 属性查看鼠标离开时的去向。

“悬停”类仅在鼠标将要移动的元素不是图像或者是已经具有悬停类的图像时被删除。在这个演示中似乎工作得很好:http://jsfiddle.net/KVLkp/18/ ，但如果两个图像并排且它们之间没有间隙，或者如果顶部的图像没有完全“包含”(在坐标意义上)由它重叠的 img，它将不起作用 - 我决定去提前发布它，因为我希望在演示中看到 event.relatedTarget 会给你足够的开始，让你想出适合你实际情况的东西。

(注意:鉴于 CSS 已经有了 :hover 伪类，“hover”对于一个类来说是一个糟糕的名字，但是当我想起来的时候，我已经懒得在 fiddle 和这里。)