怎么判断当前鼠标是否在一个指定的元素下面
日期：2014-05-16 浏览次数：20447 次
如何判断当前鼠标是否在一个指定的元素上面？
具体的想法是这样：
我想做一个类似菜单的按钮，然后当鼠标移动到按钮上时会出现一个下拉菜单，然后如果当鼠标移动到菜单上时，这个菜单不会消息，然后如果要是当前鼠标既不在按钮上又不在菜单上时就会消失，所以我对当鼠标移动到按钮上后已经显示菜单后怎么判断鼠标是不是移动到了菜单上感到困惑，请大家帮忙下
------解决方案--------------------
<script type="text/javascript">
function init(){
var a=document.getElementById("test");
var b=document.getElementById("div");
a.onmouseover=s;
a.onmouseout=h;
b.onmouseover=s;
b.onmouseout=h;
}
function s(){
var b=document.getElementById("div");
b.style.display="";
}
function h(){
var b=document.getElementById("div");
b.style.display="none";
}
window.onload=init;
</script>
<input type="button" value="test" id="test">
<div id="div" style="background-color:#0F0; width:100px; height:400px;display:none"></div>
这样试试
------解决方案--------------------
主要就是延时，例如
具体的想法是这样：
我想做一个类似菜单的按钮，然后当鼠标移动到按钮上时会出现一个下拉菜单，然后如果当鼠标移动到菜单上时，这个菜单不会消息，然后如果要是当前鼠标既不在按钮上又不在菜单上时就会消失，所以我对当鼠标移动到按钮上后已经显示菜单后怎么判断鼠标是不是移动到了菜单上感到困惑，请大家帮忙下
------解决方案--------------------
<script type="text/javascript">
function init(){
var a=document.getElementById("test");
var b=document.getElementById("div");
a.onmouseover=s;
a.onmouseout=h;
b.onmouseover=s;
b.onmouseout=h;
}
function s(){
var b=document.getElementById("div");
b.style.display="";
}
function h(){
var b=document.getElementById("div");
b.style.display="none";
}
window.onload=init;
</script>
<input type="button" value="test" id="test">
<div id="div" style="background-color:#0F0; width:100px; height:400px;display:none"></div>
这样试试
------解决方案--------------------
主要就是延时，例如
- HTML code
<!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>
<title></title>
<style type="text/css" >
.subs{display:none;width:200px; background-color:Gray;}
</style>
</head>
<body>
<a id="item1" onmouseout="settimerhide()" onmouseover="itemover()" >menu</a>
<div id="sub1" class="subs" onmouseout="settimerhide()" onmouseover="subsover()" >
some sub text<br />
some sub text<br />
some sub text
</div>
<script type="text/javascript" >
var timershow, timerhide;
function itemover() {
if (timerhide) { window.clearInterval(timerhide); }
if (document.getElementById("sub1").style.display != "block") {
timershow = window.setTimeout("document.getElementById('sub1').style.display = 'block';", 200)
}
}
function subsover() {
if (timerhide) { window.clearInterval(timerhide); }
}
function settimerhide() {
timerhide = window.setTimeout("document.getElementById('sub1').style.display = 'none';", 200)
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
