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)

演示

Answer 2

当您将显示设置为无时，图像不占用空间，没有地方可以悬停。

我会将 css 中的背景图像设置为 rgba（0 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;
}

.JS：

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

演示

这里的关键是具有opacity的元素响应事件（单击，悬停等），而具有visibility: hidden和display:none的元素则不会。

请注意，opacity在 IE 8 及更低版本中不可用。