jQuery实现鼠标移入移出事件切换功能示例
更新时间：2018年09月06日 10:08:56 作者：shuair
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现鼠标移入移出事件切换功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<style>
#msg {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
border-radius: 4px;
padding: 15px;
}
</style>
<title></title>
<script>
$(function(){
$(msg).on({
mouseover : function(){
$(this).wrap("<h1>") ;
} ,
mouseout : function(){
$(this).unwrap() ;
}
}) ;
}) ;
</script>
</head>
<body>
<p id="msg">Hello World !!!</p>
</body>
</html>
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。
注：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
<style>
#msg {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
border-radius: 4px;
padding: 15px;
}
</style>
<title></title>
<script>
$(function(){
$(msg).hover(
function(){
$(this).wrap("<h1>") ;
} ,
function(){
$(this).unwrap() ;
}
) ;
}) ;
</script>
</head>
<body>
<p id="msg">Hello World !!!</p>
</body>
</html>
代码运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
JQuery $.each遍历JavaScript数组对象实例
声明了一个JSON字符串直接遍历，在Chrome控制台下面报错，解决方法是将JSON字符串转换为JavaScript对象2014-09-09
这篇文章主要介绍了jQuery实现标题有打字效果的焦点图代码,可实现幻灯片切换显示时标题同步逐个打印显示的效果,涉及jQuery操作json格式数据及时间函数的相关技巧,需要的朋友可以参考下2015-11-11
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
下面小编就为大家带来一篇jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文给大家整理了9款基于jQuery的图片滑块焦点图插件，效果都非常炫酷，演示和下载地址都给大家整理好了，有需要的小伙伴直接拿走吧，不用跟我客气^_^2014-12-12
本篇文章分享了基于jQuery实现的幻灯图片切换效果的部分代码。感兴趣的朋友可以下载实例运行，下面就跟小编一起来看看吧2016-12-12
因为jquery中也有$调用，如果原来已经定义了，难免会冲突。下面是一些解决思路。2010-07-07
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍，需要的朋友参考下2013-07-07
工作不忙，闲来无事写了一个弹出层插件，又需要的尽管拿去用啊有什么建议欢迎提出2009-10-10
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍，需要的朋友可以参考下。2011-11-11
jquery中append()与appendto()用法分析
这篇文章主要介绍了jquery中append()与appendto()用法分析,以实例的形式分析了jquery中append()与appendto()的具体语法与详细用法,需要的朋友可以参考下2014-11-11
最新评论