jQuery中hover 与 mouseover 与mouseout 的关系误区——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
jQuery中hover 与 mouseover 与mouseout 的关系误区

发布作者:萧强   发布时间:2015-08-31   阅读次数:8216

才不久想模仿淘宝和qq空间最上面那种书包滑上去就显示一个下拉菜单的效果,结果发现在浏览器下面鼠标在div里面移动会不停的出发mouseover事件,正纳闷,在网上找到这篇文章,其实在api里面也有解释,只是没看到,相信有同样问题的朋友看了这篇文章也会有所启发的

以前一直以为在jquery中其实mouseovermouseout两个事件等于hover事件。两个没什么区别,应该是一样的。但今天一个动画效果才让我见识了,这两个并不能等同

<div class="wrapper">
          < div class="img"></div>
          < div class="text"></div>
< /div>
在wrapper上加事件,当鼠标移动到wrapper上的时候让class="point"的层放大。但如果用mouseover和 mouseout事件的话,当鼠标移动到wrapper层后,point层会变大,
但当鼠标在img和text层之间进行移动的时候,point层会变大变小,不停的变化。这并不是我们想要的结果,我们想要的是只要鼠标在wrapper层上,
无论是img还是text上,point就变大,但在鼠标未移出 wrapper层的情况下,point层不变小。

慢慢思路也清晰了,我们不用mouseover和mouseout而用hover问题就解决了

查看效果:



这么简单的问题我们竟然花了好长时间才解决,真是夸张。写篇日志以作纪念。


hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
也就是说hover!= mouseover+mouseout。         但  hover= mouseenter + mouseleave。

总结:当鼠标在div中不同层移动时,mouseover和mouseout会不停的触发,发生抖动现象,而hover或者mouseentermouseleave则只会触发一次,所以得到以上结论,希望能帮助有需要的人!


常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

JQuery新手练习场

热点文章

新闻资讯

标签云

友情赞助