<center>
x:<input type="text" id="x_id" value="" />
y:<input type="text" id="y_id" value="" />
</center>
<!--
body 中的 text-align:center;
以及
div 中的 margin:0px auto;
是为了让 div 居中
-->
<div id="div_1" onMouseOver="showTip(event)" onMouseOut="hideTip()"
style="margin:0px auto;text-align:left;width:600px;height:60px;background-color:#DFE8F6;">
<a href="www.baidu.com">我晕我怎么不行呢?</a>
与其在悬崖上展览千年,不如在爱人肩头痛哭一晚。<br />
那弯弯的一轮新月,分明暗示着:怀抱着未来的圆满。<br />
</div>
<div id="div_2" style="position:absolute;text-align:left;background-color:#808080;">
生如夏花之灿烂<br />
死如秋叶之静美<br />
换我心,为你心,此知相忆深。<br />
</div>
function showTip(evt){ evt = evt || window.event; var x,y; if(evt.pageX || evt.pageY){ // firefox x = evt.pageX; y = evt.pageY; }else{ // ie x = evt.clientX + document.body.scrollLeft - document.body.clientLeft; y = evt.clientY + document.body.scrollTop - document.body.clientTop; } // document.getElementById("x_id").value = x; document.getElementById("y_id").value = y; // 获取 div_1 的左下角坐标 var div_el = document.getElementById("div_1"); var div_left = div_el.offsetLeft; var div_top = div_el.offsetTop + div_el.offsetHeight; // 设置 div_2 的 左上角坐标 var div_tip = document.getElementById("div_2"); div_tip.style.display = ''; div_tip.style.left = div_left + "px"; div_tip.style.top = div_top + "px"; } function hideTip(){ var div_tip = document.getElementById("div_2"); div_tip.style.display = 'none'; }问题:在div_1层里加了一个超链接,怎么让鼠标移动到超链接的时候,不触发hideTip()事件?
[b]问题补充:[/b]
是啊是啊,会触发div_1的onmouseout
因为这是层里的超链接所以我不想触发onmouseout怎么办?
[b]问题补充:[/b]
我想有这个监听的,但是,现在层里包含了其他的标签,鼠标移动到这个标签,就触发了层的onmouseout,我想这个时候不触发他,就是在鼠标在层里的东西里的时候
不触发他.不管层里是否是嵌套标签等
[b]问题补充:[/b]
用你的话说
我是想不让这个标签不游离div_1这个层
把hideTip方法改为这样
[code="java"]
function hideTip(){
var div_tip = document.getElementById("div_2");
if(!div_tip.contains(event.toElement))
{
div_tip.style.display = 'none';
}
}
[/code]
因为鼠标移到链接上,会悬停,先触发 div的onMouseOut时间,所以我们加个判断,如果是属于当前DIV的元素,就不执行了。
好了,记得要加分啊,楼主,加油!
鼠标移动到超链接的时候,本来就不触发hideTip()事件
应该是指鼠标移出的时候吧
我晕我怎么不行呢? 试试看
[color=blue]只有在鼠标移出div_1时,才触发 onMouseOut事件,进而调用hideTip方法。
如果不想有这个监听,直接去掉div_1上的onMouseOut事件监听功能。就行了
[/color]
奇怪,我这边ie7,ff都是不会触发的,没你说的这个问题
使用事件冒泡是不一定能达到效果,因为在布局中,后面的文字使得a标签游离出了div布局。
解决办法就是将后面的文字用div再套起来。
[code="html"]
我把你的代码复制下来,在IE7和FF里都测试过,并不存在你说的问题。
鼠标离开链接的时候本来就不会触发mouseout事件
建议你检查下,是否存在其它的原因。
其实就一句话,就是原本的html格式不规范,建议不要使得标签与文本同级排列。
也就是说,每段文本都有直接的span或div标签括起来
楼主用的是什么浏览器,什么版本,我的在IE6和FF3.5.7下把鼠标放到A链接上不会触发div的mouseout事件。
[code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/code]