JAVASCRIPT实现鼠标停留，弹出下拉菜单

做一个触发函数，mouseover后触发，再做一个域，div，将要先是的内容放到Div中，设置这个div是隐藏的，当触发事件时再显示出来。
不知道我说的明白吗？

解决方案 »

  1.   

    你需要本参考手册,这样到处找代码是不行的.推荐:<< dhtml完全手册 >> 也就是<<网页制作完全手册>>
      

  2.   

    demo:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
           function show(obj){
    frameAll();
    document.getElementById('s'+obj.id).style.display = 'block';
           }
       function frameAll(obj){
    var all = document.getElementById('all').childNodes;
    for(var i = 0; i<all.length;i++){
     all[i].style.display = 'none';
    }
       }
        </script>
    </head>
    <body>
    <div id="_1" style="border:1px red solid;float:left;width:200px;height:30px" onmouseover='show(this)'>aaaa</div>
    <div id="_2" style="border:1px red solid;float:left;width:200px;height:30px" onmouseover='show(this)'>bbbb</div>
    <div id='all' style="clear:both;">
    <div id='s_1' style="display:none;border:1px red solid;float:left;width:200px;height:30px"> aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div id='s_2' style="display:none;border:1px red solid;float:left;width:200px;height:30px"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
    </div>
    </body>
    </html>
      

  3.   

    http://www.scriptlover.com/controls/context/
      

  4.   

    <html>
    <head>
    <script type="text/javascript">
    //显示菜单
    function showTooltip(e,id){
      var tooltip = document.getElementById(id);
      tooltip.style.postion = 'absolute';
      tooltip.style.top = e.offsetTop + 20;
      tooltip.style.left = e.offsetLeft + 20;
      tooltip.style.display = 'block';
    }
    //隐藏菜单
    function hideTooltip(id){
      var tooltip = document.getElementById(id);
      tooltip.style.display = 'none';
    }
    </script>
    </head>
    <body>
    <span onmouseover="showTooltip(this,'tooltip')" onmouseout="hideTooltip('tooltip')">
    <img src="1.jpg">
    </span>
    <div id="tooltip" class="tooltip">
    <ul>
     <li>a</li>
     <li>b</li>
     <li>c</li>
    </ul>
    </div>
    </body>
    <span>
    </html>为了美观，最好还有css,如果你要让它显示在图片下面的话
    div.tooltip{
       display: none;
       padding: 2px;
    }