Javascript CSS：仅当鼠标移动时，悬停才起作用

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

HTML

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

正如您所看到的，它是一个DIV，最初是隐藏的，当鼠标悬停在它上面时会改变颜色

此JavaScript在2秒后将其取消隐藏

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

但如果将鼠标放在DIV即将出现的位置上（当它出现时），它将以未覆盖状态出现。只有当你真正移动鼠标时，鼠标悬停效果才会发生

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

---

这是故意的吗？是否有一种方法（最好不使用JS）来检测DIV是否悬停？

当您将“显示”设置为“无”时，图像不占用任何空间，表示无处悬停

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

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

---

您可以尝试使用CSS

不透明度

并将其设置为

位置：绝对

，以防止其占用页面的流量。这似乎工作正常：

CSS:

JS:

这里的关键是具有

不透明度的元素

响应事件（单击、悬停等），而具有

可见性：隐藏的
和
显示的元素：无
不响应事件。（）

请注意，
opacity
在IE 8及以下版本中不可用。
尽管您可以使用@BrianPhillips提到的
opacity
，但它在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)

window.onmousemove=函数（事件）{
ev=事件| | window.event；
如果FF上有（event.pageX你在使用什么浏览器，对我来说它工作得很好（鼠标悬停时是红色的，即使鼠标在它出现之前仍然在它出现的地方；鼠标不悬停时是绿色的），也许这是兼容性问题？@Amber感谢FF中的指针-它的行为是正确的。我在Webkit浏览器（Chrome、Opera、Safari）中看到了这个问题还有IE。很有意思。-规范对：hover的实现不是很特别，所以我想这只是一个盲点。不过，我认为称之为bug是没有道理的。您是否尝试过使用jQuery实现上述功能？嗯……我尝试过改为使用
可见性
，但也不起作用（但是，元素是否仍会以这种方式占用视口中的空间？当
显示：无；
应用于元素时，它不会占用任何物理空间，但它仍然是DOM的一部分。是的，但它必须占用视口中的空间才能使悬停工作，否则在对象有空间之前，没有对象悬停在其上视图端口。@myajouri，感谢您的帮助，我编辑了上面的答案。@RyanY最初的想法是对象不在那里，但当它出现时-它出现在鼠标右下方-已经悬停。使用您的方法，它总是在那里，所以当我在2秒超时之前移动鼠标时-悬停立即生效。设置“显示”只是一个模拟-实际上，它可能是页面重新加载、添加动态DOM元素等。此外，我不希望更改内联样式并使用“！important”属性。@RyanY-鉴于该示例在Firefox中工作，我认为元素不需要占用悬停工作的空间。您的答案在某些情况下肯定有用，但我觉得要求屏幕上的空间为“空”在大多数情况下会导致问题。这与@RyanY answer有点类似（尽管是一个更整洁的实现）。虽然元素是透明的，但它在本质上仍然存在，并且占用了空间。@YuriyGalanter您可以尝试将位置设置为绝对，以防止它占用页面上的流量。请参阅我的更新虽然我不喜欢使用JavaScript实现纯CSS功能，但这似乎是唯一可行的解决方案。我仍将等待一段时间更长的时间，但如果我找不到一个纯CSS解决方案，这是一个主要的答案。@YuriyGalanter除非有人对此进行破解，否则我认为Javascript可能是你唯一的选择。@BrianPhillips确实提供了一个CSS解决方案（绝对定位）尽管使用了额外的JS，但我还是更喜欢这个解决方案。希望这会被认为是一个bug，并在未来的版本中修复。
#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)

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)