マウスがクラスをアクティブ化していない場合は追加しますか？ Javascript

Question

私は2つのボーダーを持っています.1つはH1の底に、もう1つはdivの右側にあります。マウスがいずれかの要素の上にある場合は、色を変更します。私のアイデアは、マウスがどちらにも入っていないときに、両方の罫線を新しい色に変更することです。私は、JavaScriptロジックのようなものが私の最善の策だと思っています。マウスが戻ってきたときにid1とid2にどのような影響を与えるのか分かりませんが、マウスがaとbにない場合はid1とid2を追加します。

これは正解でしょうか、これを行うには別の方法がありますか？あなたは境界が2ピクセル幅であると思っている場合に備えてください。私はJavaScriptがとても新しいです。要約すると、私が望むのは、マウスがマウスの上に乗ったときに私のh1とdivの境界が変化することです。マウスがどちらも上にいないとき、両方の境界が同時に変わることはありません。私はこれを解決する最も簡単で簡単ではない方法の後です。

Answer 1

あなたは、そのコンテナが吊るされたときにのみCSSを適用することでそれを行うことができます。スニペットをチェックしてください！あなたはマウスが要素上にないときに何が起こるかを処理するためにonmouseleaveイベントを使用することができます

.container { 
 
    display:block; 
 
    width:100px; 
 
} 
 

 
.container:hover h1 { 
 
    border-right:solid 2px red; 
 
} 
 
.container:hover div { 
 
    border-top:solid 2px blue; 
 
}

<div class="container"> 
 
<h1>Hi there</h1> 
 
<div>my friend</div> 
 
</div>

Answer 2

。

各要素のブール値は、ユーザーがその要素にカーソルを置いたときにtrueに設定し、ユーザーが離れるときにfalseにすることができます。次に、onmouseleaveイベントハンドラにマウスが要素のいずれにもないかどうかを調べるifステートメントを置くことができます。

//Get your h1 element 
//Get your div element 
var onH1 = false; 
var onDiv = false; 

function changeBoth() { 
    //Change both borders 
} 

h1.onmouseover = function() { 
    onH1 = true; 
    //Change h1 border 
} 
div.onmouseover = function() { 
    onDiv = true; 
    //Change div border 
} 
h1.onmouseleave = function() { 
    onH1 = false; 
    if((!onH1) && (!onDiv)) { 
    changeBoth(); 
    } 
} 
div.onmouseleave = function() { 
    onDiv = false; 
    if((!onH1) && (!onDiv)) { 
    changeBoth(); 
    } 
}