jquery如何实现鼠标经过显示，离开隐藏

这篇文章主要介绍了jquery如何实现鼠标经过显示，离开隐藏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jquery如何实现鼠标经过显示，离开隐藏文章都会有所收获，下面我们一起来看看吧。

成都创新互联专注于企业营销型网站、网站重做改版、五台网站定制设计、自适应品牌网站建设、H5页面制作、商城系统网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为五台等各大城市提供网站开发制作服务。

方法：1、使用hover()方法给父元素绑定鼠标事件，并指定两个事件处理函数，语法“父元素.hover(经过函数,离开函数)”；2、在经过函数中，用“子元素.show()”显示子元素；3、在离开函数中，用“子元素.hide()”隐藏子元素。

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery实现鼠标经过显示，离开隐藏效果

实现方法：

• 使用hover()方法给父元素绑定鼠标事件，并指定两个事件处理函数--经过显示函数和离开隐藏函数

• 在经过函数中，使用show()显示子元素

• 在离开函数中，使用hide()隐藏子元素

实现示例：

	
		
		
		
		
	
	
		

			

				p元素，默认是隐藏的，当鼠标经过时显示，离开时隐藏
			
		
		

		使用鼠标悬停div元素
	

说明：

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

语法：

$(selector).hover(inFunction,outFunction)

参数	描述
inFunction	必需。规定 mouseenter 事件发生时运行的函数。
outFunction	可选。规定 mouseleave 事件发生时运行的函数。

关于“jquery如何实现鼠标经过显示，离开隐藏”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“jquery如何实现鼠标经过显示，离开隐藏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

名称栏目：jquery如何实现鼠标经过显示，离开隐藏
文章网址：http://mswzjz.cn/article/jhpphj.html