jquery中mouseenter和mouseleave事件示例

但是由于javascript的dom事件传播机制,不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件,不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

所有jquery提供了mouseenter和mouseleave事件来终止事件传播，使事件只发生在选中的元素上。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

例

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的mouseenter和mouseleave事件</title>
<style type="text/css">
*{padding:0;margin:0; font-size:12px}
ol,ul{list-style:none}
.sns-func{ position:relative; margin:0 auto; width:200px; height:20px; line-height:20px; background-color:#999}
.sns-func li.func-list{float:left; padding:0 8px;line-height:20px; font-family:"5b8b4f53"}
.sns-func li.sns-setting{ border:1px solid #D1D6E2;padding:0 7px; border-bottom:none; background-color:#FFFFFF; position:relative; z-index:100 }
.sns-func .sns-setting-box{position:absolute; top:20px; left:0px; width:66px; border:1px solid #CDCDCD; background-color:#FFFFFF; z-index:99;}
.sns-func .sns-setting-box li.on a{background-color:#CFDDE3;}
.sns-func .sns-setting-box a:link,.sns-func .sns-setting-box a:visited{ display:block; height:17px; color:#555555;text-decoration:none; padding:5px 0 0 7px; line-height:1}
.sns-func .sns-setting-box a:hover{background-color:#CFDDE3;color:#555555;text-decoration:none;}
</style>
<script type="text/javascript" src="h/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#sel-down-w").mousemove(function(){
  $(".sns-setting-box").slideDown().mouseleave(function(){
   $(this).slideUp()
  })
 })
});
</script>
</head>

<body>
<div class="sns-func">
     <a href="lucky28/help1#" id="sel-down-w">设置</a>
      <div class="sns-setting-box" id="divSetting" style="display:none">
        <ul>
<li><a href="profile/baseinfo">个人资料</a></li>
<li><a href="privacy/basic">隐私设置</a></li>
<li><a href="privacy/dynamicFilter">动态过滤</a></li>
<li><a href="privacy/setEmail">邮件提醒</a></li>
<li><a href="profile/password">密码修改</a></li>
</ul>
      </div>
    </div>
  
</body>
</html>

兼容IE6的mouseenter和mouseleave事件

在IE6下，鼠标移上所指的内容，会闪来闪去，所以用jQuery里mouseenter和mouseleave,
额，这语法很怪异，我从来没见过这样的。
恩，收集起来，作为参考吧。

 代码如下 复制代码

$(document).ready(function(){
$(".search-photo-img").mouseenter(function(){
$(this).css("background","url(module/search/templates/default/images/photo-img-onbg.gif)").mouseleave(function(){
$(this).css("background","");
});
});
});
时间： 2024-09-19 08:18:25

jquery中mouseenter和mouseleave事件示例的相关文章

关于jquery中动态增加select,事件无效的快速解决方法_jquery

近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

jquery中交替点击事件的实现代码

 这篇文章主要介绍了jquery中交替点击事件的实现代码,需要的朋友可以参考下  代码如下: $('#clickId').toggle(  function(){$('#divId').hide();},  function(){$('#divId').show();}  );    toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能   

Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击_jquery

实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>    <script src="JS/jquery-1.9.1.js" type="text/javascript"></

jquery中 mouseout()与mouseleave()的区别

当鼠标指针从元素上移开时,发生 mouseout 事件.该事件大多数时候会与 mouseover 事件一起使用. mouseout() 方法触发 mouseout 事件,或规定当发生 mouseout 事件时运行的函数. mouseout() 事件,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 而 mouseleave 事件,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. 请看下面例子的演示我们就很清楚的理解了这二个事件的区别. 例子  $("

JQUERY中ON方法（事件委派机制）详解

前言 在开发项目的时候,JQuery的使用极其广泛,如果脑海中没有一点JQuery的基础知识,随性编写,那么就有可能造成bug问题.JQuery 1.4版本之后新增了on方法,这个用得比较多,为此我特地做了个总结,有需要的伙伴们可以好好的看一下这篇文章.on方法是专门用来处理事件委派机制的,笼统的说就是解决在你Ajax或者Pjax之后事件无法绑定到新添加的元素上的问题的,很多JQuery中的bug问题也都出现在这. 需求分析 1.解决Ajax或者Pjax之后导致点击事件失效问题. 效果图 1.当

jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果_jquery

但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

jquery下div 的resize事件示例代码

 这篇文章主要介绍了某位大神写的jquery下div 的resize事件,需要的朋友可以参考下 这是某位大神写的jquery下div 的resize事件.   代码如下: //resize of div  (function($, h, c) {  var a = $([]),  e = $.resize = $.extend($.resize, {}),  i,  k = "setTimeout",  j = "resize",  d = j + "-s

jquery下div 的resize事件示例代码_jquery

这是某位大神写的jquery下div 的resize事件. 复制代码 代码如下: //resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "

jquery中交替点击事件toggle方法的使用示例_jquery

复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能