防止图像模糊＆＃39; onmouseover活动在下面？

Question

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

然而，十字准线变得可见的瞬间，它覆盖下面的图像，激活其隐藏十字准线的onMouseOut事件。

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

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

Answer 1

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

另一个解决方案是在onMouseOut中设置超时以隐藏十字准线。它将减少闪烁，并且可以在短时间内从目标中看到十字准线。

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

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

代码很长，但它的逻辑就是我上面所说的。

只是注意：getElementsByClassName在旧浏览器中不起作用，但您可以在创建目标时使用目标数组，将它们添加到aray（可能已经有一个）并使用它代替这个电话;

这个说明了一个缓动函数，用于平滑地定位十字准线，当光标在目标上方时隐藏光标

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

Answer 2

不是使用背景图像和十字准线图像，而是使用带背景图像的div代替背景，然后将十字线图像作为该div的子项？

我没有对此进行测试，但由于十字形图像现在是背景div内容的一部分，我想它不会再触发鼠标移除。

Answer 3

我相信The pointer-events property正是您所寻找的。它基本上可以防止元素成为任何类型的鼠标事件的目标，因此它下面的元素可以处理它们。父元素仍然可以对事件做出反应。

HOWEVER 仅在Firefox，Safari和Chrome的更高版本中支持它，它可能不在CSS specification until CSS4.它支持浏览器的强大解决方案，但如果您想在任何版本的IE或Opera中解决问题，您还需要一个替代解决方案。我觉得这应该值得一提。 ：d