jQuery mouseover与mouseenter的区别
在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseover与mouseout不论鼠标指针穿过被选元素或其子元素,都会触发。而mouseenter与mouseleave只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
<ul class="con-ul">
<li>
<div class="con-one">
<div class="con-oneimg">
<img src="http://image123465.cn">
<div class="dask" style="display: block; opacity: 0;"></div>
<div class="input" style="display: block; opacity: 0;">
<input type="button" class="inp inp-one" value="预览">
<input type="button" class="inp inp-two" value="使用">
</div>
</div>
<hr style="border-top:1px solid #b5b5b5;">
<p>study</p>
</div>
</li>
</ul>
//
$(".con-ul").on({
mouseenter: function() {
$(this).find(".dask").stop(true,true).fadeIn(600);
$(this).find(".input").stop(true,true).fadeIn(600);
},
mouseleave: function() {
$(this).find(".dask").stop(true,true).fadeOut(300);
$(this).find(".input").stop(true,true).fadeOut(300);
}
}, ".con-oneimg"); //
$(".con-ul").on({
mouseover: function() {
$(this).find(".dask").stop(true,true).fadeIn(600);
$(this).find(".input").stop(true,true).fadeIn(600);
},
mouseout: function() {
$(this).find(".dask").stop(true,true).fadeOut(300);
$(this).find(".input").stop(true,true).fadeOut(300);
}
}, ".con-oneimg");
jQuery mouseover与mouseenter的区别的更多相关文章
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- mouseover和mouseenter的区别
mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...
- jQuery关于mouseover和mouseenter的区别
原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...
- jquery mouseover与mouseenter区别
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JQuery中的mouseover和mouseenter的区别
mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...
- JQ中mouseover和mouseenter的区别
我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...
- mouseover与mouseenter的区别
mouseenter事件在鼠标进入某个元素,或第一次进入这个元素的某个子元素时触发.一旦触发后,在mouseleave之前,鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mo ...
随机推荐
- VSTO Word2003 添加菜单栏, 添加工具栏
直接上代码了: Microsoft.Office.Core.CommandBar menuBar; CommandBarButton ccbtn = null; CommandBar ...
- openSSL漏洞原理及安全加固
2014年4月8日晚,互联网爆出了又一重量级安全漏洞,即CVE-2014-0160,通俗来讲就是OpenSSL出现了安全漏洞. 说 这个漏洞前,先介绍一下OpenSSL,OpenSSL是一个强大的安全 ...
- static_cast和reinterpret_cast
static_cast和reinterpret_cast 相同点:都是暴力转换,从一个类型转换为另一个类型,对于类指针不会保证安全性 static_cast和reinterpret_cast的区别 ...
- CSS Ruler 前端工具
CSS Ruler是一款在线的CSS单位工具. CSS Ruler 彩蛋爆料直击现场 http://katydecorah.com/css-ruler/
- 使用Visio进行UML建模
http://www.qdgw.edu.cn/zhuantiweb/jpkc/2009/rjkf/xmwd/Visio_UmlModel.htm#_Toc80417837 内容提纲: 1.VISIO中 ...
- 数据库链接 mysql,sqlserver
1.生成对象工厂 /// <summary> /// 生成对象工厂 /// </summary> public class DBFactory { /// <summar ...
- PHP获取http头信息和CI中获取HTTP头信息的方法
CI中获取HTTP头信息的方法: $this->input->request_headers() 在不支持apache_request_headers()的非Apache环境非常有用.返回 ...
- (3)VS2010+Opencv-2.4.8的配置攻略
这是windows平台上的东西,我为什么要写到安卓这一块呢 因为作者做的安卓方面的东西需要先在windows平台实现一下,所以就想写这篇东西,也参考了网上很多教程,不得不感叹,这些软件版本更新的太快. ...
- JDK环境变量解析
设置环境变量 在java 中需要设置三个环境变量(1.5之后不用再设置classpath了,但个人强烈建议继续设置以保证向下兼用问题)JDK安装完成之后我们来设置环境变量:右击“我的电脑”,选择“属性 ...
- cocos2d-x3.0环境搭建(基于win7以及mac)
流程概览: Windows平台 一.安装 Python与配置Python环境变量 二.安装Cocos2d-x,并创建项目 Mac平台 安装Cocos2d-x,并创建项目 具体操作: 一.安装Pytho ...