你如何检测div光标的哪一侧（jQuery）？

Question

我想检测div光标的哪一侧（顶部，左侧，右侧，底部）来自和离开。如果它向左移动，我希望内部的文本也向左移动。

Answer 1

令人惊讶的是，这里有一个仅限CSS的定向悬停实现（我没有写这个，在Twitter上找到它）：http://jsfiddle.net/kizu/zfUyN/。它不会在IE中工作，但它可能会为您提供一些在JQuery中实现它的方法。

Answer 2

鼠标事件给出坐标，您可以使用event.pageX和event.pageY在jquery中获取它们，将它与div的中点位置进行比较可以给出你来自哪一方。

Answer 3

onmouseout获取鼠标坐标并与div.offset进行比较[Top | Left | Left + Width | Top + Height]

Answer 4

通过检查鼠标在mouseleave()处理程序中的位置，然后将其与元素的位置和尺寸进行比较，可以相对轻松地完成此操作。

Answer 5

再制作4个绝对位置div，它们非常狭窄，像空格一样空白。将它们定位为 在你的主要中心div附近的一个正方形，给他们id。从那里只使用onmouseover事件将数据发送到单个变量，所有4个div鼠标悬停句柄函数都可以重置。

以下示例

lowerdiv.onmouseover = function () { yourResults = "came from bottom" }

upperdiv.onmouseover = function () { yourResults = "came from top" }

leftdiv.onmouseover = function () {  yourResults = "came from left" }

rightdiv.onmouseover = function () { yourResults = "came from right" }

centerElement.onmouseover = function () { displayResults.innerHTML = yourResults }

centerElement.onmouseout = function () { displayResults.innerHTML = "" }

这适合初学者。添加一个if语句来检查鼠标是否在centerElement之上，以便使翻转函数表示从顶部，底部，左侧或右侧退出。