JavaScript OnMouseOut事件
目的:一个position为absolute的<divid=div1>鼠标离开后隐藏这个div自身问题:div上面如果有东西(比如超链接或者表格等元素)鼠标移动到这些标签...
目的:
一个position为absolute的<div id=div1>
鼠标离开后隐藏这个div自身
问题:
div上面如果有东西(比如超链接或者表格等元素)
鼠标移动到这些标签上就会执行div1的onMouseOut事件
问题代码:
function out(){
document.getElementById("apDiv1").style.display="none";
}
<div id="apDiv1"onmouseout="out()" style="background-color:#F00 ;
position:absolute ; left:150px; height:150px; height:150px;
width:150px;">
<a href="#">为什么鼠标移动到这里div就失去焦点了</a>
</div>
邮箱:ws3@live.cn 展开
一个position为absolute的<div id=div1>
鼠标离开后隐藏这个div自身
问题:
div上面如果有东西(比如超链接或者表格等元素)
鼠标移动到这些标签上就会执行div1的onMouseOut事件
问题代码:
function out(){
document.getElementById("apDiv1").style.display="none";
}
<div id="apDiv1"onmouseout="out()" style="background-color:#F00 ;
position:absolute ; left:150px; height:150px; height:150px;
width:150px;">
<a href="#">为什么鼠标移动到这里div就失去焦点了</a>
</div>
邮箱:ws3@live.cn 展开
4个回答
展开全部
javascript onmouseover和onmouseout事件
onmouseover和onmouseout鼠标移入移出时触发的事件：
onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
onmouseover和onmouseout 这两个事件在javascript中较常用。
下面通过一个示例更深入了解这两个事件的使用：
示例：鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function aixuexi(){
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="yellowgreen";
}
function xuexi(){
var xuexi=document.getElementById("woaixuexi");
xuexi.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>
</body>
</html>
onmouseover和onmouseout鼠标移入移出时触发的事件：
onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
onmouseover和onmouseout 这两个事件在javascript中较常用。
下面通过一个示例更深入了解这两个事件的使用：
示例：鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function aixuexi(){
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="yellowgreen";
}
function xuexi(){
var xuexi=document.getElementById("woaixuexi");
xuexi.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onmouseleave和onmouseenter是IE的特有方法，主要就是因为js的冒泡问题引起的，如果要做到跨浏览器的话你可以把这个方法改造下
function out(){
document.getElementById("apDiv1").style.display="none";
}
思路1
function out(e){
e=e||window.event;
var evetObj=window.event.srcElement;
//在此判断事件Obj是div的子对象或者是div本事 就不隐藏
}
思路2
就是从事件冒泡上下手。
function out(){
document.getElementById("apDiv1").style.display="none";
}
思路1
function out(e){
e=e||window.event;
var evetObj=window.event.srcElement;
//在此判断事件Obj是div的子对象或者是div本事 就不隐藏
}
思路2
就是从事件冒泡上下手。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
有一个很简单的方法可以解决.你可以试一下.
即为div添加onmouseover事件.用onmouseover事件抵消对div内部元素对onmouseout的触发.
<div id="apDiv1"onmouseout="out()" onmouseover="javascript:this.style.display='block';" style="background-color:#F00 ;
position:absolute ; left:150px; height:150px; height:150px;
width:150px;">
<a href="#">为什么鼠标移动到这里div就失去焦点了</a>
</div>
====================
重点在此:
onmouseover="javascript:this.style.display='block';"
兼容ie,firefox.你可以试试.
即为div添加onmouseover事件.用onmouseover事件抵消对div内部元素对onmouseout的触发.
<div id="apDiv1"onmouseout="out()" onmouseover="javascript:this.style.display='block';" style="background-color:#F00 ;
position:absolute ; left:150px; height:150px; height:150px;
width:150px;">
<a href="#">为什么鼠标移动到这里div就失去焦点了</a>
</div>
====================
重点在此:
onmouseover="javascript:this.style.display='block';"
兼容ie,firefox.你可以试试.
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用onmouseleave可以了
不过onmouseleave只在IE有效。
要兼容浏览器的话可以考虑用jQuery里的hover方法
不过onmouseleave只在IE有效。
要兼容浏览器的话可以考虑用jQuery里的hover方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
