Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

hover到底是什么行为?

  hover伪类的概念到底如何定义?虽然我知道它是鼠标在元素上悬停,但是实际上还有很多问题没有定义明白。我们平时把鼠标移到元素上,元素的hover伪类被触发,这是理所当然的。但反过来,如果鼠标不动,元素主动撞向鼠标又是什么情况呢?
  下面这个测试代码会有一个元素在移动,鼠标悬停后会变成红色。但在目前的浏览器上,只要鼠标没有任何动作,元素撞上鼠标也不会触发hover。甚至我们主动触发hover后鼠标停止任何动作,元素离开鼠标位置后依然无法从hover状态还原。
<!DOCTYPE html>
<style>
div {
  position:absolute;left:0px;top:0px;
  height:10%;
  width:100%;
  background:#EEE;
  -webkit-animation:test 10s linear infinite;
  animation:test 10s linear infinite;
}
div:hover {background:red;}
@-webkit-keyframes test {
  50% {top:90%;}
  to {top:0px;}
}
@keyframes test {
  50% {top:90%;}
  to {top:0px;}
}
</style>
<div></div>
  浏览器这么实现也许是为了性能考虑吧?但我依然觉得这种处理方式是一个BUG。另外我也找到了一个Chrome和Firefox的差异。在Chrome(38)上,鼠标在元素上点击也可以更新hover状态,而Firefox(33)必须要鼠标在元素上有移动时才会更新hover状态。
  其实不仅仅是hover,DOM事件中的mouseovermouseout事件与hover采取了相同的处理方式,所以同样存在这个问题。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^