当页面加载后鼠标指针已悬停时触发鼠标悬停

Trigger onMouseOver when mouse pointer already is over after page load

本文关键字：悬停 鼠标 鼠标指针 加载      更新时间：2023-09-26

我有几个页面都非常相似。它们有一些javascript翻转链接（图像是预加载的，然后有一个onMouseOver事件调用图像交换函数，最后，有一个onMouseOut事件来恢复原始图像）。

当用户单击指向另一个页面的翻转链接时，该翻转链接位于完全相同的位置，新页面上的图像将加载为"over"状态。在Chrome和Safari中并非如此（IE和Firefox按预期工作）。

所以。。。在页面加载时，有没有办法检查鼠标是否已经悬停在图像上以立即交换它？像"OnMouseAlreadyOver"这样的东西？

谢谢。

如果你使用jQuery，它可以毫无问题地工作！

http://jsfiddle.net/beuae

（不仅适用于按钮，也适用于div）

实际上，jQuery是一个非常好的框架，它确保一切按预期进行，并且跨浏览器。这个例子证实了这一点。

W3C 标准说

鼠标悬停 = 脚本 [CT]
当指针设备移动到元素上时，将发生 onmouseover 事件。此属性可用于大多数元素。

鼠标移动 = 脚本 [CT]
当指针设备在元素上移动时，将发生 onmousemove 事件。此属性可用于大多数元素。

mouseover在移动到对象的边界时触发。 当鼠标已经悬停在元素上时，会发生mousemove。

您可能需要使用onmousemove（甚至两者兼而有之）。

您可能需要根据元素位置和鼠标光标位置实际进行计算。

//Get Mouse Position
document.onmousemove=getMouseCoordinates;
function getMouseCoordinates(event){
    ev = event || window.event;
    mouseX = ev.pageX;
    mouseY = ev.pageY;
}

如果不将变量传递到其他页面或使用 cookie 来跟踪悬停的页面，您就不能这样做（如果人们确实更改了鼠标位置，这将故障转移）

理论上，您可以检查鼠标位置和按钮位置，但是除非触发事件，否则无法获取鼠标位置，因此鼠标必须移动，如果它移动，则应该触发CSS ：hover。

这是一个小问题，我怀疑大多数人会点击一个链接，等待下一页，然后期望该链接悬停并准备再次点击（为什么没有人会继续点击同一个按钮，除非它做不同的事情）

从用户体验的角度来看，我想知道webkit在这里没有最好的方法，为什么要将一个页面的操作移植到另一个页面。

您可以使用document.getElementFromPoint(mouseX, mouseY)来获取元素，但获取光标位置的唯一方法是通过事件。问题是，唯一的事件是单击和鼠标移动，这需要用户从一开始就输入，这是您要避免的。

简而言之，不，这不可能用JavaScript做。你只能使用 CSS。

相关文章：