87,991
社区成员
发帖
与我相关
我的任务
分享js控制div交叉显示
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script>
function showXs()
{
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="block";
}
function showOut()
{
document.getElementById('div1').style.display="block";
document.getElementById('div2').style.display="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1" style="width:500px; height:300px; background-color:#000;" onmousemove="showXs()">
</div>
<div id="div2" style="width:500px; height:300px; background-color:Red; display:none" onmouseout="showOut()">
<div style="width:50%; height:100%; float:left; background-color:Fuchsia"></div>
<div style="width:50%; height:100%; float:left; background-color:Green"></div>
</div>
</form>
</body>
</html>
这个就是当鼠标移到div1时候div1隐藏，div2显示，当鼠标移除div2的时候div1显示，div2隐藏
但是现在问题是当鼠标在div2的两个颜色之间移动的时候会闪动，该怎么搞可以不闪动啊？
<head runat="server">
<title>无标题页</title>
<script>
function showXs()
{
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="block";
}
function showOut()
{
document.getElementById('div1').style.display="block";
document.getElementById('div2').style.display="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1" style="width:500px; height:300px; background-color:#000;" onmousemove="showXs()">
</div>
<div id="div2" style="width:500px; height:300px; background-color:Red; display:none" onmouseout="showOut()">
<div style="width:50%; height:100%; float:left; background-color:Fuchsia"></div>
<div style="width:50%; height:100%; float:left; background-color:Green"></div>
</div>
</form>
</body>
</html>
这个就是当鼠标移到div1时候div1隐藏，div2显示，当鼠标移除div2的时候div1显示，div2隐藏
但是现在问题是当鼠标在div2的两个颜色之间移动的时候会闪动，该怎么搞可以不闪动啊？
...全文
请发表友善的回复…
发表回复
张运领 2013-03-05
- 打赏
- 举报
onmousemove = "showXs()"
你在div2里面，再加上这个，就可以了，这个应该算是在事件捕获的时候，先触发了div2的onmouseout，具体怎么说，也说不好、、、你可以在div2之下的每个div中都加入一个omouseout事件，用alert打印，就可以看出哪一个onmouseout被先触发了。
peng409640235 2013-03-05
- 打赏
- 举报
具体怎么实现啊？我是菜鸟！不懂啊！
mycoolaccount 2013-03-05
- 打赏
- 举报
用jquery轻松实现
$(1).hide();
$(2).show();
peng409640235 2013-03-05
- 打赏
- 举报
谢谢，按这个方法解决了！
