Javascript/css/html - mousedownがホバーを無効にするのを防ぐ

Question

次の例のように、javascriptのホバーイベントが無効になっているようです。（コードを見直す必要はなく、サンプルを実行するだけです私が話しているかを確認する。）

* { user-select: none; } 
 
#click, #drag, #hover { 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.3); 
 
    text-align: center; 
 
    color: #ffffff; 
 
    cursor: default; 
 
} 
 
#click { 
 
    width: 150px; height: 150px; line-height: 150px; 
 
    left: 10px; top: 50%; margin-top: -75px; 
 
    background-color: #d00000; 
 
} 
 
#drag { 
 
    width: 220px; height: 50px; line-height: 50px; 
 
    left: 160px; top: 50%; margin-top: -25px; 
 
    background-color: #900000; 
 
} 
 
#hover { 
 
    width: 200px; height: 200px; line-height: 200px; 
 
    left: 380px; top: 50%; margin-top: -100px; 
 
    background-color: #000000; 
 
    white-space: nowrap; 
 
} 
 
#hover:after { 
 
    content: "This element has hover effects"; 
 
    position: absolute; 
 
    display: inline-block; 
 
    color: #909090; 
 
    left: 5px; top: -80px; 
 
    font-size: 11px; 
 
} 
 
#hover:hover { 
 
    background-color: #ffffff; 
 
    color: #000000; 
 
}

<div id="click"> 
 
    Click down here 
 
</div> 
 
<div id="drag"> 
 
    --> Now drag over this way --> 
 
</div> 
 
<div id="hover"> 
 
    No hover occurs 
 
</div>

モーメントがマウスボタンが離されたことに注意してください、一番右のdiv上で正常に発生するイベントを置きます。

マウスを押している間、どの要素でもホバーイベントが発生するようにするにはどうすればよいですか？ css、pure javascript、またはhtmlでソリューションを探しています。

Answer 1

これを解決するための純粋なCSS方法はありません。単純にそれが機能するからです。 CSSを使ってそれを上書きする方法はあまりありません。あなたが代わりに行う必要があるでしょう何

はmouseenterおよび/またはmouseoverとmouseoutおよび/またはmouseleaveを使用して、独自のホバー機能を実装し、手動です。このような

何か：

const myElement = document.querySelector('#myElement'); 
 

 
myElement.addEventListener('mouseenter', ({ target }) => target.classList.add('hovering')); 
 
myElement.addEventListener('mouseleave', ({ target }) => target.classList.remove('hovering'));

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    background: #F00; 
 
} 
 

 
div.hovering { 
 
    background: #0F0; 
 
}

<div id="myElement"></div>