覆盖/覆盖/堆叠元素上的Javascript鼠标事件 [英] Javascript mouse events on overlaid/covered/stacked elements

问题描述

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

I would like to catch the mouse event for an element that is positioned under an other element.

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

Here is a example of what I have : http://jsfiddle.net/KVLkp/13/

现在我想要的是当鼠标悬停在红色正方形上时，蓝色正方形具有黄色边框.

Now what I want is that blue square has yellow borders when mouse is over red square.

重要的是:

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

• they are images. So there is no way to embed one element in the other.
• this is an easy example, but in reality there are many img. So the search of hovered elements by coordinate calculations is not my solution (I've already found this answer)
• There is no link between the two images except that the mouse is over them all

谢谢您的帮助

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

I've written a more complete example of my general case : - img order in DOM is not fixed and can be changed on live - top and bottom image has various size and position

谢谢大家！

推荐答案

您可以尝试以下方法:

<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属性来查看鼠标离开时的去向.

Rather than setting the colour of the border directly I've defined a class called "hover" that sets the colour, so that I can easily test whether a given element has the border without hard-coding colours everywhere, and then I've made use of the event.relatedTarget property to see where the mouse is going when it leaves.

仅当鼠标要移动的元素不是图像或已经具有悬停类的图像时，才删除悬停"类.在此演示中似乎工作得很好: http://jsfiddle.net/KVLkp/18/，但是如果两个图像并排且彼此之间没有间隙，或者如果两个图像之间没有重叠，则顶部的图像没有完全包含"(在坐标意义上)，这是行不通的-我决定继续并以任何方式发布它，因为我希望在演示中看到event.relatedTarget可以让您有足够的起点来提出一些适合您实际情况的东西.

The "hover" class is only removed if the element the mouse is going to is not an image or is an image that already has the hover class. Seems to work pretty well in this demo: http://jsfiddle.net/KVLkp/18/, but it won't work if two images are side-by-side with no gap between them or if the image on top isn't completely "contained" (in a coordinate sense) by the img it overlaps - I decided to go ahead and post it anyway because I hope that seeing event.relatedTarget in the demo will give you enough of a start to come up with something to fit your real situation.

(注意:悬停"对于一个类来说是一个坏名字，因为CSS已经具有:hover伪类，但是到我记得的时候，我再也没有烦恼在小提琴中和这里更改它了.)

(Note: "hover" is a bad name for a class given CSS already has the :hover pseudo-class, but by the time I remembered I couldn't be bothered changing it in the fiddle and here.)

这篇关于覆盖/覆盖/堆叠元素上的Javascript鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！