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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
基于jQuery拖拽事件的封装
Nov 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递归实现无限分类 格式化数组的详解
2013/06/08 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
可输入的下拉框
2006/06/19 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Python2包含中文报错的解决方法
2018/07/09 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
全国道德模范事迹
2014/02/01 职场文书
简历的自我评价
2014/02/03 职场文书
大学生个人求职信例文
2014/07/07 职场文书
逃课检讨书
2015/01/26 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技