困扰我很久的一个问题是,当调用onmouseout的时候由于我需要隐藏的层上面还有好几个层,所以当鼠标在该层内划过子层的时候也会调用onmouseout,从而隐藏掉该层,但是我需要的效果是如csdn论坛上的用户头像上鼠标放上去就显示,移出该层的时候该层消失,还请大牛给解答下疑惑,以及实现方法!!感激不尽啊
解决方案 »
- 求两篇外文文章,谢谢大家
- |zyciis|200分求:如何判断一段HTML放进一个新建的DIV后,这个DIV的高和度是多少呢; 急 在线
- 救命的cookie问题
- 下拉菜单的问题??
- 散100分请解决动态table的效率问题
- jquery text() 遇到“对象不支持此属性或方法”,求救!
- 在FireFox 和Netscape里显示display属时出理的怪事情!
- 关于javascript代码的问题(也许ASP代码)
- 如何实现Javascript变量同PHP变量的通信
- js解析xml文件实现下拉导航(求源码)请不要用JQURY
- jqery表格的添加和合并
- 这个页面效果是怎么做出来的?PHP有相关的技术吗?
$("#id").hide();
});
你每个层得id不一样就可以了?这样就可以隐藏你想要隐藏的层了。其他的不会影响到。
这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。二.contains在onmouseover时先进行如下判断,结果为true时再执行方法体:
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断,结果为true时再执行方法体:
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}
下面来解释一下上面两行代码的含义:在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是:○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){ while(obj != null && typeof(obj.tagName) != "undefined") {if(obj == this)return true;obj = obj.parentNode;} return false; }; }
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
div {
margin:5px;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//移出外部DIV,隐藏DIV
$('.one').mouseout(function(){
$('.one').hide()
});
//进入内部DIV和外部DIV就显示外部DIV。
//这里多加了一个外部div的mouseover的原因是:当鼠标从内部DIV到外部DIV时,
//也会触发外部DIV的mouseout。所以此处增加一个外部DIV的mouerover方法
$('.one,.one div').mouseover(function(){
$('.one').show()
});
});
</script>
</HEAD> <BODY>
<div style="width:600px;height:600px" class="one">外部DIV
<div style="width:100px;height:100px" >内部DIV</div>
<div style="width:100px;height:100px" >内部DIV</div>
<div style="width:100px;height:100px" >内部DIV</div>
<div style="width:100px;height:100px" >内部DIV</div>
</div>
</BODY>
</HTML>
$.fn.PL_rilifunction(Option){
//你可以在这里边针对对象绑定各种事件,例如
$(this).mouseover(function(){})
$(this).click(function(){})
}
//用法:
//$("#rili").PL_rili(option);
你可以看看我的这个事件绑定的例子