javascript - CSS :hover works only when mouse moves

Question

我创建了一个非常基本的示例:

HTML

<div id="bla"></div>

CSS

#bla {
    width:400px;
    height:400px;
    background-color:green;
    display:none;
}

#bla:hover{
   background-color:red;
}

如您所见，它是一个最初隐藏的 DIV，当鼠标悬停在其上时会改变颜色。

此 JavaScript 在 2 秒后取消隐藏

setTimeout(function() {
     document.getElementById('bla').style.display="block";
},2000)

但是，如果您将鼠标放在 DIV 即将出现的位置上 - 当它出现时 - 它会出现在未悬停状态。只有当您实际移动鼠标时 - 悬停效果才会发生。

这是一个 demo .运行它并立即将鼠标放在结果 Pane 上。

这是设计使然吗？有没有一种方法(最好没有 JS)来检测 DIV 是否悬停？

Answer 1

虽然您可以使用 opacity，@BrianPhillips 提到，它在 IE 8 中不起作用。我不知道纯 CSS 解决方案，但这里有一个足够简洁的 Javascript 解决方法:

window.onmousemove=function(event){
    ev = event || window.event;
    if (event.pageX <= 400 && event.pageY <= 400){
        document.getElementById('bla').style.backgroundColor= "red";
    } else {
        document.getElementById('bla').style.backgroundColor= "green";
    }
}
setTimeout(function() {
     document.getElementById('bla').style.display="block";
},2000)

Demo