悬停元素时如何检测鼠标指针来自

Question

我只想问一下当指针悬停在div之类的元素上时，如何使用jquery来检测鼠标指针。

运行该功能时，我想知道鼠标指针来自顶部，左侧，底部和右侧

谢谢！

Answer 1

尝试以下代码：

var getDirection = function (ev, obj) {
    var w = obj.offsetWidth,
        h = obj.offsetHeight,
        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
        y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;

    return d;
};

$('#yourDiv').mouseover(function (event) {
    var direction = getDirection(event, this);
    if (direction == 0) {
        $(this).html('Top side');
    } else if (direction == 1) {
        $(this).html('Right side');
    } else if (direction == 2) {
        $(this).html('Bottom side');
    } else if (direction == 3) {
        $(this).html('Left side');
    }
});

#yourDiv {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yourDiv"></div>

getDirection是CSS-Tricks从this page复制而来的，它似乎以多种不同的方式完成了您想要的工作。