0

私は単純にホバーイベントを使用できない立場にありますが、マウスが特定の要素の領域内にあるとき、およびその領域を離れるときに、マウスオーバーとマウスアウトをトリガーする必要があります。javascript、jquery、またはその混合のいずれかです。マウスの位置を変数として保存したり、マウスが特定の領域を離れたことを伝える方法を見つけたりすることができませんでした。私の質問はそれぞれ「????」で表されます コードで。

function targetMouse() {
    var box = document.getElementById('CleanBox'),
        top = box.offsetTop,
        left = box.offsetLeft,
        right = left + box.offsetWidth,
        bottom = top + box.offsetHeight,
        mouseX = ????;
        mouseY = ????;

    if (left < mouseX > right && top < mouseY > bottom) {
        $('#CleanBox').mouseover();
    }
    else if (????) {
        $('#CleanBox').mouseout();
    }
}

助けてくれてありがとう！

4

1 に答える 1

1

このようなもの？

。箱 {

    width:300px;
    height:100px;
    position: absolute;
    top: 30%;
    left: 30%;
    background-color:yellow;
    border:2px solid;
}

<div id="popup">Mouse is on box</div>
<div id="box" class="box"></div>

var box = document.getElementById("box");
var top = box.offsetTop;
var left = box.offsetLeft;
var right = left + box.offsetWidth;
var bottom = top + box.offsetHeight;
var hoverState = false;
var popup = document.getElementById("popup");

popup.hidden = true;

function hoverCheck(evt) {
    var x = evt.clientX;
    var y = evt.clientY;

    if (x >= left && x <= right && y >= top && y <= bottom) {
        if (hoverState === false) {
            hoverState = true;
            console.log("mouseon");
        }
    } else {
        if (hoverState === true) {
            hoverState = false;
            console.log("mouseoff");
        }
    }

    popup.hidden = !hoverState;
}

document.addEventListener("mousemove", hoverCheck, false);

jsfiddleで

于 2013-04-21T09:40:14.913 に答える