CSS:hover仅在鼠标移动时工作 [英] CSS :hover works only when mouse moves
问题描述
我创建了一个非常基本的示例:
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;
}
正如你可以看到,它是一个DIV,最初是隐藏的,
As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.
此JavaScript在2秒后取消隐藏
This JavaScript unhides it after 2 seconds
setTimeout(function() {
document.getElementById('bla').style.display="block";
},2000)
但是,如果你将鼠标放在DIV即将出现的位置 - 当它出现时 - 它显示为无遮挡状态。
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.
这里是 demo 。运行它,并立即将鼠标放在结果窗格上。
Here's a demo. Run it and immediately place mouse over result pane.
这是设计吗?
推荐答案
虽然你可以使用这个方法来检测DIV 可以使用 opacity
,@BrianPhillips提到,它不工作在IE 8。我不知道一个纯CSS解决方案,但这里有一个简明的Javascript解决方法: / p>
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:
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)
这篇关于CSS:hover仅在鼠标移动时工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!