onmouseover with javascript

Question

div aとdiv bは、マウスがdiv bを超えたときに切り替えてから、マウスがdiv aのときに戻るようにします。しかし、マウスが残っていなくても、その超グリッチとスイッチはdiv aに変わりません。マウスがまだdiv aにある場合、にはが実行され、navMouseOutにはどうして得られますか？代わりのonmouseenter（いただきました！間違って参照するためのコードをテストしてください）

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

使用の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イベントは次のように発射されていることですマウスに新たに配置された要素。これを防ぐには、再配置コードを実行するかどうかを決定するfalseからfalseに切り替えるフラグを使用できます。 。 `;さておき、あなただけの`のdocument.getElementById（ "B"）と言う、あなたの他の関数への呼び出しをラップする匿名関数を必要としないのonmouseover = navMouseOverとして

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>