jQuery实现鼠标移入移出事件切换功能示例


Posted in jQuery onSeptember 06, 2018

本文实例讲述了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 版本前该方法触发 mouseentermouseleave 事件。

jQuery 1.8 版本后该方法触发 mouseovermouseout 事件。

注:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/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>

代码运行效果:

jQuery实现鼠标移入移出事件切换功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery仿微信聊天界面
May 06 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
You might like
php+curl 发送图片处理代码分享
2015/07/09 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
python 图片验证码代码
2008/12/07 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
网上书店创业计划书
2014/01/12 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
cf战队宣传语
2015/07/13 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
利用js实现简单开关灯代码
2021/11/23 Javascript