的JavaScript/CSS/HTML - 防止鼠標按下從禁用懸停

看來，在瀏覽器的JavaScript鼠標事件被禁用，當鼠標被按住，如下面的例子說明：（無需檢查代碼，只需運行該示例看到我在說什麼。）的JavaScript/CSS/HTML - 防止鼠標按下從禁用懸停

* { 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，純JavaScript或HTML。

來源

2017-05-26 Gershom Maes

當我點擊紅色矩形和移動我的鼠標我選擇文本，向右移，我繼續選擇，當我在黑色矩形得到它變白，所以懸停在這裏工作。 - 火狐DevEdition 54.0a2（2017年4月18日），openSUSE的飛躍42.2 64位。 –

@TodorSimeonov這很有趣，而且好像比我用什麼更好的執行器（Chrome 58.0.3029.110 64位）。 –

是不是真的有一個純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>

來源

2017-05-26 15:57:11 samanime

的JavaScript/CSS/HTML - 防止鼠標按下從禁用懸停

回答

相關問題