对于类似“射击场”的游戏，有些图像带有一个 onMouseOver 事件，将显示一个十字准线（跟随鼠标）和一个将隐藏它的 onMouseOut 事件。
然而，当十字准线变得可见时，它覆盖了下图，激活了隐藏十字准线的 onMouseOut 事件。
这会产生非常非常难看的“闪烁”效果。
有没有办法防止十字准线图像遮挡下面的目标？
问问题
148 次
3 回答
1
我相信指针事件属性正是您正在寻找的。它基本上可以防止元素成为任何类型的鼠标事件的目标，因此它下面的元素可以处理它们。父元素仍然可以对事件做出反应。
然而，它仅在更高版本的 Firefox、Safari 和 Chrome 中受支持，并且可能直到 CSS4 才会出现在 CSS 规范中。对于受支持的浏览器来说，这是一个很棒的解决方案，但是如果您想在任何版本的 IE 或 Opera 中解决问题，您还需要一个替代解决方案。我觉得这里值得一提。:D
于 2012-07-14T16:28:21.637 回答
1
一个简单的解决方案是为显示它的十字准线创建一个 onMouseOver（我知道这是多余的，但它适用于菜单等）。
另一种解决方案是在 onMouseOut 中设置超时以隐藏十字准线。它将减少闪烁，并且十字准线将在短时间内在目标外可见。
编辑：
另一个是在鼠标和元素之间执行碰撞检测，将 mouseOver 更改为目标父元素中的 mouseMove：
代码很长，但它的逻辑就是我上面所说的。
请注意：getElementsByClassName在较旧的浏览器中不起作用，但您可以在创建它们时使用一组目标，将它们添加到一个数组（可能您已经有一个）并使用它来代替这个调用；
这一个说明了一个缓动函数来平滑定位十字准线并且光标在目标上方时隐藏
于 2012-07-14T16:13:53.317 回答
1
不是使用图像作为背景，使用图像作为十字准线，而是使用带有背景图像的 div 作为背景，然后将十字准线图像作为该 div 的子级会怎样？
我没有对此进行测试，但由于十字准线图像现在将成为背景 div 内容的一部分，我想它不会再触发鼠标移出。
于 2012-07-14T16:22:24.280 回答