div层mouseout问题

lochen 2008-01-09 05:17:58

<!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>Untitled Document</title>
<script type="text/javascript">
function initBox(){
if (!document.getElementsByTagName){ return; }
var imgs = document.getElementsByTagName("img");

for (var i=0; i<imgs.length; i++){
var img = imgs[i];
if(img.getAttribute("rel")!=""){

img.onmouseover = function () {showBox(img); return false;}
}
}
}
function showBox(imgobj){
//get mouse location
var mousepoint=this.getAbsPos(imgobj);
//create layer
var objLay = document.createElement("div");
//create line break
var linebreak = document.createElement("br");

objLay.setAttribute('id','lay');
objLay.style.position = 'absolute';
objLay.style.top = mousepoint.top;
objLay.style.left = mousepoint.left;
objLay.style.backgroundColor = "#CCCCCC";

var fullphoto = document.createElement("img");
fullphoto.src=imgobj.src;
objLay.appendChild(fullphoto);
objLay.appendChild(linebreak);
objLay.appendChild(document.createTextNode(imgobj.rel));

document.getElementsByTagName("body")[0].appendChild(objLay);
objLay.onmouseout= function () {
document.getElementsByTagName("body")[0].removeChild(objLay);
}
}

function getAbsPos(obj){
var objResult = new Object();
objResult.top = obj.offsetTop;
objResult.left = obj.offsetLeft;
objResult.width = obj.offsetWidth;
objResult.height = obj.offsetHeight;

while( obj = obj.offsetParent){
objResult.top += obj.offsetTop;
objResult.left += obj.offsetLeft;
}
return objResult;
}

function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}

}

addLoadEvent(initBox);
</script>
</head>

<body>
<img src="01.jpg" rel="abc" border="1" width="50" />
<img src="02.jpg" rel="def" border="1" width="50" />
<img src="03.jpg" rel="xyz" border="1" width="50" />
</body>
</html>

滑鼠指在图片就会弹出div层显示原图
div层里有一个img和一个text内容

当div层mouseout离开时,div层就会消失

但滑鼠指在text内容时,也会消失,为何会这样?text内容加了在div层內的

怎样做才可以指在text内容div层也不消失,而mouseout div层時會消失

谢谢

...全文

755 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

rjzou2006 2008-01-10

打赏
举报

onmouseout 就行

Go 旅城通票 2008-01-10

打赏
举报

改了你的一些代码的错误和不兼容性

<!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> Untitled Document </title> 

<script type="text/javascript"> 

function initBox(){ 

    if (!document.getElementsByTagName){ return; } 

    var imgs = document.getElementsByTagName("img"); 



    for (var i=0; i <imgs.length; i++){ 

      var img = imgs[i]; 

        if(img.getAttribute("rel")!=""){ 

        

            img.onmouseover = function () {//注意不是img参数，这样的话div就一直显示在最后一个图片上了

                                 showBox(this); } 

            img.onmouseout=function(){//=====添加了一个onmouseout事件

            var d=document.getElementById("lay");

            if(d!=null)

              d.style.display="none";

            }

        } 

    } 

} 

function showBox(imgobj){ 

//=========下面只创建一次div==================

    //get mouse location 

    var mousepoint=this.getAbsPos(imgobj); 

    //create layer 

    var objLay=document.getElementById("lay");

    if(objLay==null) //第一次

    {

      objLay=document.createElement("div");

      objLay.setAttribute('id','lay'); 

      objLay.style.position = 'absolute'; 

      

      objLay.style.backgroundColor = "#CCCCCC"; 

    }  

    else 

    { 

      objLay.innerHTML="";//清空内容

      objLay.style.display="";//显示层

    }

    //create line break 

    

    objLay.style.top = mousepoint.top; 

    objLay.style.left = mousepoint.left; 

      

    var linebreak = document.createElement("br"); 

    

    

    

    var fullphoto = document.createElement("img"); 

    fullphoto.src=imgobj.src; 

    objLay.appendChild(fullphoto); 

    objLay.appendChild(linebreak); 

//ff时自定义属性只能用getAttribute来获取

    objLay.appendChild(document.createTextNode(imgobj.getAttribute("rel"))); 

    

    document.getElementsByTagName("body")[0].appendChild(objLay); 

    objLay.onmouseout= function () { //onmouseout事件

    this.style.display="none"; 

    } 

    objLay.onmouseover=function(){this.style.display="";}//onmouseout事件

} 



function getAbsPos(obj){ 

      var objResult = new Object(); 

      objResult.top = obj.offsetTop; 

      objResult.left = obj.offsetLeft; 

      objResult.width = obj.offsetWidth; 

      objResult.height = obj.offsetHeight; 

      

      while( obj = obj.offsetParent){ 

        objResult.top += obj.offsetTop; 

        objResult.left += obj.offsetLeft; 

      } 

      return objResult; 

} 

    

function addLoadEvent(func) 

{   

    var oldonload = window.onload; 

    if (typeof window.onload != 'function'){ 

      window.onload = func; 

    } else { 

      window.onload = function(){ 

      oldonload(); 

      func(); 

      } 

    } 



} 





addLoadEvent(initBox); 

</script> 

</head> 



<body> 

<img src="01.jpg" rel="abc" border="1" width="50" /> 

<img src="02.jpg" rel="def" border="1" width="50" /> 

<img src="03.jpg" rel="xyz" border="1" width="50" /> 

</body> 

</html>

xiaolei1982 2008-01-10

打赏
举报

relatedTarget对象介绍





(function (bool) {

//兼容FF一些方法

var html;



if (bool) {



html = window.HTMLElement.prototype;



window.__defineGetter__("event", function () {

//兼容Event对象

var o = arguments.callee;



do {



if (o.arguments[0] instanceof Event) return o.arguments[0];



} while (o = o.caller);



return null;



});



Event.prototype.__defineGetter__("fromElement", function () {

/*

这里：

onmouseover的时候relatedTarget为鼠标离开（onmouseout）的对象

onmouseout的时候relatedTarget为鼠标当前（onmouseover）的对象

*/

return this.relatedTarget;



});



html.contains = function (o) {

do {

if (o == this) return true;

} while (o = o.parentNode);

return false;

};



}



})(/Firefox/.test(window.navigator.userAgent));



window.onload = function () {



var wc = document.getElementById("ta");

wc.onmouseover = function () {

var wc = this, e = window.event;

if (!wc.contains(e.fromElement)) alert("over");

};



wc.onmouseout = function () {

var wc = this, e = window.event;

if (!wc.contains(e.toElement || e.fromElement)) alert("out");

};

};

rjzou2006 2008-01-10

打赏
举报

你的text内容在哪里?

yixianggao 2008-01-10

打赏
举报

前几天有人问过类似滴问题！

详见“DIV里的事件问题”中俺在4楼和6楼回帖！

http://topic.csdn.net/u/20080105/20/7926e1ae-85af-4d14-b59e-4305020bd5af.html

lochen 2008-01-10

打赏
举报

onmouseleave 不行啊,firefox不支援

onmouseout是行,但指着div內text内容,并没有离开div时也会消失啊

xiaolei1982 2008-01-09

打赏
举报

 objLay.onmouseleave=   function   ()   {

        document.getElementsByTagName("body")[0].removeChild(objLay);        

        }

本文实例分析了jQuery中hover与mouseover和mouseout的区别。分享给大家供大家参考，具体如下：以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件。两个没什么区别，应该是一样的。但昨天一个...

1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。代码如下: <div class=”sel_box”> <input type=”button” value=”请选择...

课程简介： 1，html5编辑器的介绍和使用 2，块标签 3，内联标签 4，超链接和锚点 5，12种选择器 6，颜色 7，单位 8，css属性 9，盒模式 10，div布局 11，内容图片 12，布局图片 13，用户交互图片 14，字体 15，表单...

通过mouseover，mouseout来触发事件，才判断鼠标是否在该区域。但是这种方法的局限性就是，必须要触发mouseover，或mouseout，mouseleave事件才能知道。代码如下:function chkIn() { div_1.innerText = “现在你...

Vue图片放大镜组件的封装...效果图如下：　实现图片放大镜效果的Vue组件代码如下：　<template>　<div>　<div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">　<div id="small">

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章