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。运行它并立即将鼠标放在结果窗格上。

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

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)

Demo

此处的关键是，opacity元素会响应事件（点击，悬停等），而visibility: hidden和display:none的元素则不会。（source）

请注意，{8}及以下版本无法使用opacity。

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

3 个答案: