的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 - 防止鼠标按下从禁用悬停

回答

相关问题