CSS :只有当鼠标移动时，悬停才有效

Question

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

<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

@BrianPhillips提到，虽然您可以使用opacity，但它在IE8中不起作用。我不知道有一个纯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)

演示

Answer 2

当您将显示设置为none时，图像没有占用空间，意味着没有地方可悬停。

我会将css中的背景图像设置为rgba(0 0 0)；使其不可见，但仍在dom中。然后，您可以将javascript更改为

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

http://jsfiddle.net/euT7k/3

Answer 3

您可以尝试使用CSS opacity，同时将其设置为position: absolute，以防止它占用页面上的流。这似乎是适当的：

CSS：

#bla {
    width:400px;
    height:400px;
    background-color:green;
    opacity: 0;
    position: absolute;
}

联署材料：

setTimeout(function() {
         document.getElementById('bla').style.opacity="1";
         document.getElementById('bla').style.position="relative";
},2000)

演示

这里的关键是使用opacity的元素响应事件(单击、悬停等)，而使用visibility: hidden和display:none的元素则不响应。(来源)

请注意，opacity在IE8和更低版本中不可用。