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

我想捕获位于其他元素下的元素的鼠标事件。覆盖/覆盖/堆叠元素上的Javascript鼠标事件

这里是什么，我有一个例子：http://jsfiddle.net/KVLkp/13/

现在我想那是什么蓝方有黄色边框当鼠标移动到红场。

最重要的事情是：

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

谢谢你的帮助

编辑：我写我一般情况下一个更完整的例子： - 在DOM IMG顺序是不固定的，可以在现场改变 - 顶部和底部的图像有不同的大小和位置

感谢大家！

来源

2012-03-08 Guile

鉴于您已经预料到了合理的解决方法，我不确定您的请求能否真正实现。将DOM虚拟成气泡，而不是任意定位。你对你的房屋有绝对的把握吗？例如：当然，你不能在另一个图像中嵌入一个图像，但是他们*有*是图像吗？他们是否可以成为具有背景图像的DIV元素？ – 2012-03-08 09:43:18

下面是似乎可行的一种方法：http://jsfiddle.net/KVLkp/17/（虽然也许它失败了“两个图像之间没有链接”的标准）。 – nnnnnn 2012-03-08 10:13:12

@DavidHedlund他们确实必须是图像，因为多个图像将显示（非常像）随机位置，各种大小，因为我不想溢出dom（我的现实是我可以有4000个图像） – Guile 2012-03-08 10:34:09

你可以尝试沿着以下线的东西：

<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伪类，但我记得我不能打扰更改它在小提琴和这里的时间）

来源

2012-03-08 10:52:31 nnnnnn

你真的明白了！我认为relatedTarget是我的神秘方法！谢谢！我用我的新例子试了一下（你不知道它）。它仍然有一些错误的东西，但我会设法处理它！谢谢！ http://jsfiddle.net/KVLkp/20/ – Guile 2012-03-08 11:00:50

不客气。就像我说的，我希望它能让你走上正确的轨道，即使有些情况下我的代码不能工作。（对不起，我今天没有时间再看看它。） – nnnnnn 2012-03-08 11:12:22

我接受这个答案。但我没有看到relatedTarget是鼠标刚刚离开的目标元素。这不完全是我想要的。非常感谢你！ – Guile 2012-03-08 12:40:00

我觉得你比你更复杂的事情。只要保持简单就可以将你的事件放在内部正方形和外部正方形上，但不要使用“this”使用通过id来获得外部正方形。 $（'＃bluesqure'），然后就像悬停在蓝色方块上那样做你的工作。

我不知道这是否会成为您真实世界场景中的可能解决方案。

来源

2012-03-08 10:15:54 John

这是不可能的，因为当鼠标在红色方块上时，我不知道要处理哪个蓝色方块。我的意思是我有100个红色正方形和100个随机坐标的蓝色正方形。 – Guile 2012-03-08 10:28:27

我看起来像nnnnnn为你解决它 – John 2012-03-09 05:18:13

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

回答

相关问题