这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下。
jQuery实现鼠标移入移出事件切换功能
分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery事件-div的显示隐藏及鼠标的移入移出</title> <style> .header{ width:302px; height:40px; background:green; font-size:20px; margin-bottom: 0px; } .content{ width:300px; border:1px solid #333; background:#CCC; display: none; margin-top:0px; } </style> </head> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function (){ //显示隐藏 $(".header").click(function (){ var flag = $(".content").is(":hidden"); if(flag){ $(".content").show(); }else{ $(".content").hide(); } }); /* //使用bind的绑定事件,跟上上面的效果是一样的 $(".header").bind("click", function (){ var flag = $(".content").is(":hidden"); if(flag){ $(".content").show(); }else{ $(".content").hide(); } }); */ /* //鼠标的移入移出 $(".header").mouSEOver(function (){ $(".content").show(); }).mouSEOut(function (){ $(".content").hide(); }); */ /* //合成事件 hover() $(".header").hover(function (){ $(".content").show(); },function (){ $(".content").hide(); }); */ }); </script> <body> <h5 class="header" align="center">什么是jQuery？</h5> <div class="content"> Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ， 它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0及后续版本将不再支持IE6/7/8浏览器。 jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果， 并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全， 而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页面保持代码和html内容分离，也就是说， 不用再在html里面插入一堆js来调用命令了，只需要定义id即可。 </div> </body> </html>
JS鼠标移入移出事件代码范例二
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>百度</title> <style type="text/css"> #wrap{ width: 150px;height: 200px; /*background: rgb(211,211,211);*/ margin: 200px auto 0px; text-align: center; position: relative; background: rgb(225,225,225); } a{ color:white; display: inline-block; width: 150px;height: 20px; } .one{ position: absolute; left: 70px;top: 14px; color: white; } #div1{ width: 80px;height:81px; margin: 3px auto 0px; background: white; } #div1 a{ display: inline-block; width:78px; height: 25px; color:black; font-size: 15px; line-height: 25px; text-decoration: none; position: relative; margin: 1px 1px; z-index: 1; } </style> </head> <body> <div id="wrap"> <a href="#" id="set">设置</a> <span>♦</span> <div id="div1"> <a href="#">搜索设置</a> <a href="#">高级搜索</a> <a href="#">搜索历史</a> </div> </div> <script type="text/javascript"> var set = document.getElementById('set'); var div1 = document.getElementById('div1'); var one = document.getElementsByClassName('one'); var two = document.getElementsByClassName('two'); one[0].style.display = 'none'; div1.style.display = 'none'; set.onmouSEOver = function (){ one[0].style.display = 'block'; div1.style.display = 'block'; } set.onmouSEOut = function (){ one[0].style.display = 'none'; div1.style.display = 'none'; } two[0].onmouSEOver = function(){ two[0].style.background = 'rgb(57,139,251)'; } two[1].onmouSEOver = function(){ two[1].style.background = 'rgb(57,139,251)'; } two[2].onmouSEOver = function(){ two[2].style.background = 'rgb(57,139,251)'; } two[0].onmouSEOut = function(){ two[0].style.background = 'white'; } two[1].onmouSEOut = function(){ two[1].style.background = 'white'; } two[2].onmouSEOut = function(){ two[2].style.background = 'white'; } div1.onmouSEOver = function(){ one[0].style.display = 'block'; div1.style.display = 'block'; } div1.onmouSEOut = function(){ one[0].style.display = 'none'; div1.style.display = 'none'; } one[0].onmouSEOver = function(){ one[0].style.display = 'block'; div1.style.display = 'block'; } one[0].onmouSEOut = function(){ one[0].style.display = 'none'; div1.style.display = 'none'; } </script> </body> </html>
当鼠标移入设置上时，效果是这样的：
当鼠标移入下面的选项的时候，背景颜色会变成蓝色：
到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。
以上是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实现鼠标移入移出事件切换功能
分享给大家供大家参考，具体如下：
<!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 事件。
代码运行效果：
