制作drop-list，鼠标悬停鼠标问题

Question

我希望将光标移到左侧的图标上时，右侧会出现div droplist。我可以设法做到这一点，但是当光标从图标移出时div消失，只有当鼠标移出div

时它才会消失

 <script type="text/javascript">
   function showDrop(){
     document.getElementById('droplist').style.display="block";
   }
   function hideDrop(){
     document.getElementById('droplist').style.display="none";
   }

</script>


 <div id="droplist"  onmouseout="hideDrop()" style="background:#800000;border:1px solid #000000;position:absolute;display:none;">
     <img src="images/stats.png"/><br>
     <div >
        <input type="button" value="phone num" ><br>
        <input type="button" value="fax num" >
     </div>
 </div>

 <img src="images/stats.png" onmouseover="showDrop()"/>

更新

我发现div onmouseout上的事件droplist会使div内的每个元素在其上发生事件时起作用

Answer 1

Internet Explorer做了一件好事，并想到了mouseenter和mouseleave事件。从我简单阅读的内容来看，旧版/其他浏览器无法可靠地实现它们（需要引用！）。

在拔牙之前，我使用了YUI（雅虎用户界面）Javascript库来处理这一切。

以下是有关如何使用2个事件的链接：http://yuilibrary.com/yui/docs/event/mouseenter.html

如果你能够使用第三方JS库，这是非常方便的伎俩。

这是一个jsfiddle与你的代码+ YUI的mouseleave / enter事件在行动：http://jsfiddle.net/adHS8/

编辑：jsfiddle.net代码，左侧下拉菜单中选择了YUI 3.4.1框架：

<style type="text/css">
    #droplist {
        height:24px;
        overflow:hidden;
        border:1px solid black;
    }
    #droplist.open {
        height:auto;
        overflow:visible;
    }
        #droplist.open .stuff {
            border:1px solid red;
        }

</style>
<div id="droplist">
    <img src="http://aux4.iconpedia.net/uploads/8428095711397178883.png"  height="24" width="24" /><br />
     <div class="stuff">
        <input type="button" value="phone num" ><br />
        <input type="button" value="fax num" >
     </div>
</div>
<script type="text/javascript">
YUI().use(['event-mouseenter'], function (Y) {
    var droplist= Y.one('#droplist');

    droplist.on('mouseenter', function () {
        this.addClass('open');
    });

    droplist.on('mouseleave', function () {
        this.removeClass('open');
    });
});
</script>