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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现简易验证插件封装
Sep 13 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日历制作代码分享
2014/01/20 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
大学生作弊检讨书
2014/02/19 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
主持人演讲稿
2014/05/13 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
高三物理教学反思
2016/02/20 职场文书