CSS:hover仅在鼠标移动时起作用

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即将出现的位置 - 当它出现时 - 它会显示在未被覆盖的状态.只有当您实际移动鼠标时 - 才会发生悬停效果.

这是一个演示.运行它并立即将鼠标放在结果窗格上.

这是设计的吗？有没有办法(没有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)

演示