请问谁能帮我写一个 简单的隐藏弹出 JS效果呢？


var fx=document.getElementById("fenxiang");//分享
var fx_l=document.getElementById("fenxiang_list");//分享列表
fx.onmouseover=function(){//鼠标在“分享”上页面显示“分享列表"
    fx_l.style.display="block";
};
fx.onmouseout=function(){//鼠标行色移开“分享”页面隐藏“分享列表"
    fx_l.style.display="none";
};

解决方案 »

  1.   

    请问如何修改吖？<script type="text/javascript">
    var fx=document.getElementById("fenxiang");//分享
    var fx_l=document.getElementById("fenxiang_list");//分享列表
    fx.onmouseover=function(){//鼠标在“分享”上页面显示“分享列表"
        fx_l.style.display="block";
    };
    fx.onmouseout=function(){//鼠标行色移开“分享”页面隐藏“分享列表"
        fx_l.style.display="none";
    };
    </script>
    <div style=" margin:100px; float:left">
        <div style="width:80px;  height:80px;  float:left; background:#36F; margin-right:3px;" id="fenxiang"></div>
        <div style="width:200px; height:80px; float:left; background:#F63" id="fenxiang_list"></div>
    </div>
      

  2.   


    <div style=" margin:100px; float:left">
        <div style="width:80px;  height:80px;  float:left; background:#36F; margin-right:3px;" id="fenxiang"></div>
        <div style="width:200px; height:80px; float:left; background:#F63" id="fenxiang_list"></div>
    </div>我加了个 DIV 上去 请问如何修改吖？
      

  3.   


    <div style=" margin:100px; float:left">
        <div style="width:80px;  height:80px;  float:left; background:#36F; margin-right:3px;" id="fenxiang"></div>
        <div style="width:200px; height:80px; float:left; background:#F63" id="fenxiang_list"></div>
    </div>我加了个 DIV 上去 请问如何修改吖？不用改，JS是通过ID找到DOM元素，你确定ID是对的就可以了
      

  4.   


     <HEAD>
      <TITLE> popout </TITLE>
      <style>
    div.xsh {width:80px; height:80px; margin-right:3px; float:left; position:relative;}
    div.tch {width:80px; height:80px; display:none; position:relative; top:-90px;}
      </style>
     </HEAD> <BODY> <div style=" margin:100px; height:100px; float:left">
        <div class="xsh" style="background:#36F; left:0px;">
    <div class="tch" style="background:#F63;" id="fenxiang_list"></div>
    </div>
        
        <div class="xsh" style="background:yellow; left:0px;" onmouseover="this.childNodes[0].style.display='block'" onmouseout="this.childNodes[0].style.display='none'">
    <div class="tch" style="background:green" id="renren_list"></div>
    </div>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    //js不写也可以，跟黄色div的效果是一样的
    var arr = document.getElementsByTagName("div"); //取所有div
    for (var i=0; i<arr.length; i++)
    {
    if (arr[i].className == "xsh")  //找到样式是 xsh 的
    { //给这些div加上onmouseover 和 onmouseout
    arr[i].onmouseover = function(){this.childNodes[0].style.display='block'}
    arr[i].onmouseout = function(){this.childNodes[0].style.display='none'}
    }
    }
    </SCRIPT>
     </BODY>
      

  5.   

    我还有另一个思路，供楼主参考
    鼠标放上去，宽度=几个图标的宽度之和
    移开，宽度=0默认给dom元素设置一个最小宽度即可