js怎么怎么获取鼠标停留在DIV上的状态
需求:我现在要做个分类导航,有一级分类一个DIV命名d1二级三级分类一个DIV命名d2,2个DIV并列关系当鼠标移到d1上d2显示鼠标移动到d2上时没事当鼠标移到d1和d...
需求:
我现在要做个分类导航,
有一级分类 一个DIV 命名d1
二级三级分类 一个DIV 命名d2,2个DIV并列关系
当鼠标移到d1上 d2显示 鼠标移动到d2上时 没事
当鼠标 移到d1 和 d2 以外时 d2隐藏
各位高手 求怎么获取鼠标在 d1 d2上的状态
比如,d2隐藏 鼠标停留在d1上 d2显示 鼠标 移开d1 停留在d2上 d2不隐藏
但是鼠标 只有停留在d1 d2 以外的地方 d2隐藏 最好别用延时方法。。 展开
我现在要做个分类导航,
有一级分类 一个DIV 命名d1
二级三级分类 一个DIV 命名d2,2个DIV并列关系
当鼠标移到d1上 d2显示 鼠标移动到d2上时 没事
当鼠标 移到d1 和 d2 以外时 d2隐藏
各位高手 求怎么获取鼠标在 d1 d2上的状态
比如,d2隐藏 鼠标停留在d1上 d2显示 鼠标 移开d1 停留在d2上 d2不隐藏
但是鼠标 只有停留在d1 d2 以外的地方 d2隐藏 最好别用延时方法。。 展开
展开全部
代码如下,运行一下就可以了:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var speed = 600;
$("#d1").hover(function(){
$("#d2").show(speed);
},function(){
$("#d2").hide(speed);
});
});
</script>
<style type="text/css">
<!--
#d1{ background:#eee; height:100px; width:300px;}
#d2{ background:#ddd; height:50px; width:100px;}
-->
</style>
</head>
<body>
<div id="d1">
<div id="d2">d2</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var speed = 600;
$("#d1").hover(function(){
$("#d2").show(speed);
},function(){
$("#d2").hide(speed);
});
});
</script>
<style type="text/css">
<!--
#d1{ background:#eee; height:100px; width:300px;}
#d2{ background:#ddd; height:50px; width:100px;}
-->
</style>
</head>
<body>
<div id="d1">
<div id="d2">d2</div>
</div>
</body>
</html>
更多追问追答
追问
d1 d2 是并列 关系,不是嵌套关系。。。
问题上有提到啊!
追答
example
$(document).ready(function(){
$("#d2").hide( );
$("#d1").mouseover(function(){$("#d2").show();});
$("#d2").mouseover(function(){$("#d2").show();});
$("#d1").mouseout(function(){$("#d2").hide();});
$("#d2").mouseout(function(){$("#d2").hide();});
});
d1
d2
展开全部
var drag_ = false
var D = new Function('obj', 'return document.getElementById(obj);')
var oevent = new Function('e', 'if (!e) e = window.event;return e')
function Move_obj(obj) {
var x, y;
D(obj).onmousedown = function (e) {
drag_ = true;
with (this) {
style.position = "absolute"; var temp1 = offsetLeft; var temp2 = offsetTop;
x = oevent(e).clientX; y = oevent(e).clientY;
document.onmousemove = function (e) {
if (!drag_) return false;
with (this) {
style.left = temp1 + oevent(e).clientX - x + "px";
style.top = temp2 + oevent(e).clientY - y + "px";
}
}
}
document.onmouseup = new Function("drag_=false");
}
}
<div onmousedown="Move_obj(this.id)" id="dd" style="width:100px;height:100px;background:red"></div>
如果需要以后都留在此位置,需把当前位置的坐标保存到数据库,下次打开时读取数据加载div
var D = new Function('obj', 'return document.getElementById(obj);')
var oevent = new Function('e', 'if (!e) e = window.event;return e')
function Move_obj(obj) {
var x, y;
D(obj).onmousedown = function (e) {
drag_ = true;
with (this) {
style.position = "absolute"; var temp1 = offsetLeft; var temp2 = offsetTop;
x = oevent(e).clientX; y = oevent(e).clientY;
document.onmousemove = function (e) {
if (!drag_) return false;
with (this) {
style.left = temp1 + oevent(e).clientX - x + "px";
style.top = temp2 + oevent(e).clientY - y + "px";
}
}
}
document.onmouseup = new Function("drag_=false");
}
}
<div onmousedown="Move_obj(this.id)" id="dd" style="width:100px;height:100px;background:red"></div>
如果需要以后都留在此位置,需把当前位置的坐标保存到数据库,下次打开时读取数据加载div
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
function $(s){
return document.getElementById(s)
}
div=$("d1")
div.onmouseover=function(){
d2=$("d2")
d2.style.display="block"
}
div.onmouseout=function(){
d2=$("d2")
d2.style.display="none"
}
return document.getElementById(s)
}
div=$("d1")
div.onmouseover=function(){
d2=$("d2")
d2.style.display="block"
}
div.onmouseout=function(){
d2=$("d2")
d2.style.display="none"
}
更多追问追答
追问
这个不就是 鼠标在 d1 上停留时 触发一个事件,离开时触发一个事件。
跟我问的问题不相干啊。。。。
追答
我的就是d2在d1里 鼠标在d1和d2上显示
自己问什么都不清楚
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询