淘小兔

jQuery事件:

mouseenter() 方法 只有在鼠标指针经过被选元素时(不包括鼠标指针经过任何子元素),才会触发 mouseenter 事件。

mouseover ()方法在鼠标指针经过被选元素或者经过任何子元素时,都会触发 mouseover 事件。

  1. 在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件...

  2. mouseenter和mouseleave是成对对应的, mouseover & mouseout是对应的, mousedown和mouseup是对应的

  3. 没有mousehover, 只有hover 事件函数, hover是模拟"悬停"的, 就是检查是否在 "mouseenter 和 mouseleave " 之间切换的.., ** 可以认为 hover 等于 mouseenter + mouseleave.(会检查 鼠标 是否 移出 对象..., 如果没有移出对象, 就不触发 fnOut.)

区别mouseenter() 方法与 mouseover() 方法的实例:(下面内容放置页面BODY标签内即可运行,取消“ mouseover事件触发” 注释,再注释 “mousenter事件触发” 可进行效果对比,使用mouseover时,鼠标由主菜单移至二级菜单,会闪一下,就是因为经过任何子元素时,也会触发 mouseover 事件!)

<style type="text/css">*{margin:0;padding:0;}body{padding:10px 200px; font:13px/1.75 "宋体",Tahoma, Geneva, sans-serif;}ul li{ list-style:none;}.menu-demo .nav li{float:left;}.menu-demo .nav li.menu{ position:relative;}.menu-demo .nav1,.menu-demo .nav2,.menu-demo .nav3,.menu-demo .nav4{width:150px;height:32px;display:block; border:2px blue solid;}.menu-demo .nav li .smenu{ position:absolute;width:300px;height:300px; background: #0CF; border:1px red solid;display:none;}.menu-demo .nav li a.on{border:2px green solid;}.menu-demo .nav li ul li{clear:both;}</style><script src="/images/2021/07/19/02/2021071902132115610000.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(e) {// -- mouseover事件触发 ---//$(".menu").mouseover(function(){//$(this).children(".smenu").fadeIn("fast");//})//.mouseout(function(){//  $(this).children(".smenu").hide();//})// -- mousenter事件触发 ---$(".menu").mouseenter(function(){$(this).children(".smenu").fadeIn("fast");}).mouseleave(function(){  $(this).children(".smenu").hide();})})</script><div class="menu-demo"><ul class="nav"><li class="menu">    <a href="#" class="nav1">菜单一</a>    <div class="smenu">(菜单一)二级菜单内容        <ul>            <li><a href="#">二级菜单链接</a></li>            </ul>        </div>    </li>    <li><a href="#" class="nav2">菜单二</a></li>    <li class="menu">    <a href="#" class="nav3">菜单三</a>    <div class="smenu">(菜单三)二级菜单内容</div>    </li>    <li class="menu">    <a href="#" class="nav4">菜单四</a>    <div class="smenu">(菜单四)二级菜单内容</div>    </li></ul></div>

 

下载仅供下载体验和测试学习,不得商用和正当使用。

下载体验

请输入密码查看内容!

如何获取密码?

 

点击下载