onmouseover with javascript

Question

我希望div a和div b在鼠标结束时切换位置div b然后在鼠标离开时切换回div a。但它的超级毛病，即使鼠标没有离开div a也会切换。当鼠标仍然在div a时，我如何获得它到而不是运行navMouseOut，为什么它这样做。 （请测试代码，看看什么错）

document.getElementById("b").onmouseover = function() { 
 
    navMouseOver() 
 
}; 
 
document.getElementById("a").onmouseout = function() { 
 
    navMouseOut() 
 
}; 
 

 
function navMouseOver() { 
 
    document.getElementById("a").style = ("top: 50%;"); 
 
    document.getElementById("b").style = ("top: 40%; "); 
 
} 
 

 
function navMouseOut() { 
 
    document.getElementById("a").style = ("top: 40%;"); 
 
    document.getElementById("b").style = ("top: 50%;"); 
 
}

#a { 
 
    position: fixed; 
 
    top: 40%; 
 
    left: 20%; 
 
    background-color: red; 
 
} 
 

 
#b { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 20%; 
 
    background-color: lightblue; 
 
}

<div id="a"> 
 
    <p>content a</p> 
 
</div> 
 
<div id="b"> 
 
    <p>content b...</p> 
 
</div>

Answer 1

使用OnMouseEnter在代替的onmouseover

document.getElementById("b").onmouseenter = function() { 
navMouseOver() 
}; 

document.getElementById("a").onmouseout = function() { 
navMouseOut() 
}; 

Answer 2

我认为这个问题是在传播，让看到这个函数的onmouseout，即使你将鼠标移出P元素，但仍然在DIV中，onmouseout仍然会执行。

你可以写HTML这样的：

<div id="a"> 
    content a 
</div> 
<div id="b"> 
    content b... 
</div> 

或使用stoppropagation（）或cancelBubble（）

Answer 3

的问题是，当元素切换位置，mouseover和mouseenter事件被触发为元素，新定位在鼠标上。为了防止这种情况，您可以使用切换为真的标志来决定是否运行重新定位代码。

var target1 = document.getElementById("mouseoverTarget1"); 
 
var switching = false; 
 
var inStartingPosition = true; 
 

 
target1.addEventListener("mouseover", function() { 
 
    if (!switching) { 
 
    switching = true; 
 
    target1.style.top = inStartingPosition ? "50px" : "0px"; 
 
    target2.style.top = inStartingPosition ? "-50px" : "0px"; 
 
    inStartingPosition = inStartingPosition ? false : true; 
 
    console.log("mouseover target 1"); 
 
    setTimeout(() => { 
 
     switching = false; 
 
    }, 100); 
 
    } 
 
}); 
 

 
var target2 = document.getElementById("mouseoverTarget2"); 
 

 
target2.addEventListener("mouseover", function() { 
 
    if (!switching) { 
 
    switching = true; 
 
    target1.style.top = inStartingPosition ? "50px" : "0px"; 
 
    target2.style.top = inStartingPosition ? "-50px" : "0px"; 
 
    inStartingPosition = inStartingPosition ? false : true; 
 
    console.log("mouseover target 2"); 
 
    setTimeout(() => { 
 
     switching = false; 
 
    }, 100); 
 
    } 
 
});

#mouseoverTarget1, #mouseoverTarget2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
} 
 

 
#mouseoverTarget1 { 
 
    background-color: red; 
 
} 
 

 
#mouseoverTarget2 { 
 
    background-color: blue; 
 
}

<div id="mouseoverTarget1"></div> 
 
<div id="mouseoverTarget2"></div>