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

I created a very basic sample:

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

HTML

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

CSS

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

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

As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.

你可以看到它是一个最初被隐藏的DIV,当鼠标悬停在它上面时会改变颜色。

This JavaScript unhides it after 2 seconds

此JavaScript在2秒后取消隐藏

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

But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.

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

Here's a demo. Run it and immediately place mouse over result pane.

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

Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?

这是设计的吗?有没有办法(没有JS更好)来检测DIV是否悬停?

3 个解决方案

#1

While you can use opacity, @BrianPhillips mentioned, it doesn't work in IE 8. I don't know of a pure CSS solution, but here's a concise enough Javascript workaround:

虽然你可以使用不透明度,但@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

#2

When you set display to none the image takes up no space meaining there is nowhere to hover over.

当你将显示设置为无时,图像不占用任何空间,无处可悬停。

I would set the background-image in you css to rgba(0 0 0 0); making it invisible but still in the dom. You can then change your javascript to

我会把你css中的背景图像设置为rgba(0 0 0 0);使它看不见但仍然在dom。然后,您可以将您的JavaScript更改为

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

http://jsfiddle.net/euT7k/3

#3

You could try using CSS opacity along with setting it to position: absolute to prevent it from taking up flow on the page. This appears to work properly:

您可以尝试使用CSS不透明度并将其设置为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

The key here is that elements with opacity respond to events (click, hover, etc), while elements with visibility: hidden and display:none do not. (source)

这里的关键是具有不透明度的元素响应事件(单击,悬停等),而具有visibility:hidden和display:none的元素则不响应。 (资源)

Note that opacity isn't available in IE 8 and below.

请注意,IE 8及以下版本不提供不透明度。

#1