javascript - 防止图像来自下面的 'obscuring' onmouseover 事件？

Question

对于类似“射击场”的游戏，有些图像带有一个 onMouseOver 事件，该事件将显示一个十字线(跟随鼠标)和一个将隐藏它的 onMouseOut 事件。

但是，一旦十字准线可见，它就会覆盖下图，激活隐藏十字准线的 onMouseOut 事件。

这会产生非常非常难看的“闪烁”效果。

有没有办法防止十字准线图像遮挡下面的目标？

Answer 1

一个简单的解决方案是为显示它的十字准线创建一个 onMouseOver(我知道这是多余的，但它适用于菜单等)。

另一种解决方案是在 onMouseOut 中设置超时以隐藏十字准线。它将减少闪烁，十字准线将在短时间内在目标外可见。

编辑:
另一种方法是在鼠标和元素之间执行碰撞检测，将目标父元素中的 mouseOver 更改为 mouseMove:

http://jsfiddle.net/sHecT/1/

代码比较长，但是逻辑就是我上面说的。

请注意:getElementsByClassName 在旧版浏览器中不起作用，但您可以使用目标数组，在创建它们时将它们添加到数组中(可能您已经有一个)并用它代替这个调用；

这个演示了一个缓动函数，可以平滑地定位十字准线，光标在目标上时隐藏

http://jsfiddle.net/sHecT/2/