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

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下。

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

分享给大家供大家参考，具体如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>  
  6. <style>  
  7. .header{  
  8.     width:302px;  
  9.     height:40px;  
  10.     background:green;  
  11.     font-size:20px;  
  12.     margin-bottom: 0px;  
  13. }  
  14. .content{  
  15.     width:300px;  
  16.     border:1px solid #333;  
  17.     background:#CCC;  
  18.     display: none;  
  19.     margin-top:0px;  
  20. }  
  21. </style>  
  22. </head>  
  23. <script type="text/javascript" src="jquery-1.11.1.js"></script>  
  24. <script type="text/javascript">  
  25.     $(function (){  
  26.         //显示隐藏  
  27.         $(".header").click(function (){  
  28.             var flag = $(".content").is(":hidden");  
  29.             if(flag){  
  30.                 $(".content").show();  
  31.             }else{  
  32.                 $(".content").hide();  
  33.             }  
  34.         });  
  35.           
  36.         /*  
  37.         //使用bind的绑定事件,跟上上面的效果是一样的  
  38.         $(".header").bind("click", function (){  
  39.             var flag = $(".content").is(":hidden");  
  40.             if(flag){  
  41.                 $(".content").show();  
  42.             }else{  
  43.                 $(".content").hide();  
  44.             }  
  45.         });  
  46.         */  
  47.         /*  
  48.         //鼠标的移入移出  
  49.         $(".header").mouSEOver(function (){  
  50.             $(".content").show();  
  51.         }).mouSEOut(function (){  
  52.             $(".content").hide();  
  53.         });  
  54.         */  
  55.         /*  
  56.         //合成事件 hover()  
  57.         $(".header").hover(function (){  
  58.             $(".content").show();  
  59.         },function (){  
  60.             $(".content").hide();  
  61.         });  
  62.         */  
  63.           
  64.     });  
  65. </script>  
  66. <body>  
  67.     <h5 class="header" align="center">什么是jQuery？</h5>  
  68.     <div class="content">  
  69.         Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，  
  70.         它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），  
  71.         jQuery2.0及后续版本将不再支持IE6/7/8浏览器。  
  72.         jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，  
  73.         并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，  
  74.         而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。  
  75.         jQuery能够使用户的html页面保持代码和html内容分离，也就是说，  
  76.         不用再在html里面插入一堆js来调用命令了，只需要定义id即可。  
  77.     </div>  
  78. </body>  
  79. </html>

JS鼠标移入移出事件代码范例二

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <Meta charset="UTF-8">
  5.     <title>百度</title>
  6.     <style type="text/css">
  7.     #wrap{
  8.         width: 150px;height: 200px;
  9.         /*background: rgb(211,211,211);*/
  10.         margin: 200px auto 0px;
  11.         text-align: center;
  12.         position: relative;
  13.         background: rgb(225,225,225);
  14.     }
  15.     a{
  16.         color:white;
  17.         display: inline-block;
  18.         width: 150px;height: 20px;
  19.     }
  20.     .one{
  21.         position: absolute;
  22.         left: 70px;top: 14px;
  23.         color: white;
  24.     }
  25.     #div1{
  26.         width: 80px;height:81px;
  27.         margin: 3px auto 0px;
  28.         background: white;
  29.     }
  30.     #div1 a{
  31.         display: inline-block;
  32.         width:78px;
  33.         height: 25px;
  34.         color:black;
  35.         font-size: 15px;
  36.         line-height: 25px;
  37.         text-decoration: none;
  38.         position: relative;
  39.         margin: 1px 1px;
  40.         z-index: 1;
  41.     }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id="wrap">
  46.         <a href="#" id="set">设置</a>
  47.         <span>♦</span>
  48.         <div id="div1">
  49.             <a href="#">搜索设置</a>
  50.             <a href="#">高级搜索</a>
  51.             <a href="#">搜索历史</a>
  52.         </div>
  53.     </div>
  54.     <script type="text/javascript">
  55.     var set = document.getElementById('set');
  56.     var div1 = document.getElementById('div1');
  57.     var one = document.getElementsByClassName('one');
  58.     var two = document.getElementsByClassName('two');
  59.     one[0].style.display = 'none';
  60.     div1.style.display = 'none';
  61.     set.onmouSEOver = function (){
  62.         one[0].style.display = 'block';
  63.         div1.style.display = 'block';
  64.     }
  65.     set.onmouSEOut = function (){
  66.         one[0].style.display = 'none';
  67.         div1.style.display = 'none';
  68.     }
  69.     two[0].onmouSEOver = function(){
  70.         two[0].style.background = 'rgb(57,139,251)';
  71.     }
  72.     two[1].onmouSEOver = function(){
  73.         two[1].style.background = 'rgb(57,139,251)';
  74.     }
  75.     two[2].onmouSEOver = function(){
  76.         two[2].style.background = 'rgb(57,139,251)';
  77.     }
  78.     two[0].onmouSEOut = function(){
  79.         two[0].style.background = 'white';
  80.     }
  81.     two[1].onmouSEOut = function(){
  82.         two[1].style.background = 'white';
  83.     }
  84.     two[2].onmouSEOut = function(){
  85.         two[2].style.background = 'white';
  86.     }
  87.  
  88.     div1.onmouSEOver = function(){
  89.         one[0].style.display = 'block';
  90.         div1.style.display = 'block';
  91.     }
  92.     div1.onmouSEOut = function(){
  93.         one[0].style.display = 'none';
  94.         div1.style.display = 'none';
  95.     }
  96.     one[0].onmouSEOver = function(){
  97.         one[0].style.display = 'block';
  98.         div1.style.display = 'block';
  99.     }
  100.     one[0].onmouSEOut = function(){
  101.         one[0].style.display = 'none';
  102.         div1.style.display = 'none';
  103.     }
  104.     </script>
  105. </body>
  106. </html>

进入页面时的效果是这样的：

当鼠标移入设置上时，效果是这样的：

当鼠标移入下面的选项的时候，背景颜色会变成蓝色：

 到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。@H_403_35@

 以上是JS写法，下面是JQ的写法

JQ的鼠标移入移出事件可以用两个函数写，亦可以用一个函数写：

1、var  a = $("#wrap");

a.on（"mouSEOver",function(){"鼠标移入时想要的效果"}）；

a.on("mouSEOut",function(){"鼠标移出事想要的效果"})；

2、这一种方法类似于css中的hover效果，相对比而言更简单一点：

var a = $("#wrap");

a.hover(function(){"鼠标移入的效果"},function(){“鼠标移出时的效果”})；

jQuery实现鼠标移入移出事件切换功能@H_403_35@

分享给大家供大家参考，具体如下：@H_403_35@

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <Meta charset="utf-8" />
  5.     <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
  6.     <style>
  7.     #msg {
  8.       color: #3c763d;
  9.       background-color: #dff0d8;
  10.       border-color: #d6e9c6;
  11.       border-radius: 4px;
  12.       padding: 15px;
  13.     }
  14.     </style>
  15.     <title></title>
  16.     <script>
  17.       $(function(){
  18.         $(msg).on({
  19.           mouSEOver : function(){
  20.             $(this).wrap("<h1>") ;
  21.           } ,
  22.           mouSEOut : function(){
  23.             $(this).unwrap() ;
  24.           } 
  25.         }) ;
  26.       }) ; 
  27.     </script>
  28.   </head>
  29.   <body> 
  30.     <p id="msg">Hello World !!!</p>
  31.   </body>
  32. </html>

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

jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后该方法触发 mouSEOver 和 mouSEOut 事件。

代码运行效果：

201896103001954.gif

jQuery事件切换移入移出鼠标鼠标鼠标

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
jQuery插件开发入门
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
jQuery效果之jQuery实现图片的依次加载图片
css代码： js代码：
jQuery之deferred对象详解
一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
jQuery插件开发进阶
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
jQuery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
jQuery插件之上传文件ajaxfileupload.js源码与使用
在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
《从零开始学习jQuery》：用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作