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

我想捕获位于其他元素下的元素的鼠标事件。

这是我的一个例子: http : //jsfiddle.net/KVLkp/13/

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

重要的是:

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

谢谢您的帮助

编辑:我已经写了一个更完整的例子我的一般情况: – DOM中的img顺序不固定,可以在现场更改 – 顶部和底部图像有各种大小和位置

感谢大家!

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

   

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

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

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

我认为你的事情比你必须的更复杂。 只是保持简单将你的事件放在内部正方形和外部正方形上,但不要使用“this”使用通过id得到外部广场例如$(’#bluesqure’)然后就像你的hover一样做你的工作在蓝色的广场上。

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