1. 爱易网页
  2. JavaSript
  3. js统制div交叉显示

js统制div交叉显示

日期：2014-05-16　 浏览次数：20388 次

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的两个颜色之间移动的时候会闪动，该怎么搞可以不闪动啊？
div function html

------解决方案--------------------
onmousemove = "showXs()"
你在div2里面，再加上这个，就可以了，这个应该算是在事件捕获的时候，先触发了div2的onmouseout，具体怎么说，也说不好、、、你可以在div2之下的每个div中都加入一个omouseout事件，用alert打印，就可以看出哪一个onmouseout被先触发了。

相关资料更多>

  1. 应用jstl标签时提示The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolve
  2. ownerDocument莫非不是指向document吗
  3. Ext Ext.ux.form.LovCombo setValue()赋值有关问题！沙发也给分.
  4. Gson对Java嵌套对象跟JSON字符串之间的转换
  5. 浅述jsp跟servlet的关系
  6. 去json数组里动态新增一个元素
  7. (转)struts2中的jsp值传入后台action接收的三种方法
  8. <input type="button"/>会触发submit，这尼玛不是坑爹吗？解决方案
  9. 用Extjs3实现右上角小贴士