制作下拉列表，將鼠標懸停在鼠標移出的問題上

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()"/>

更新

我發現，事件onmouseout的DIV droplist將盡一切元素，里面div ，如果行事就可以了事件

Answer 1

Internet Explorer曾經做過一件好事，並想到了mouseenter和mouseleave事件。 根據我的簡要閱讀，舊版/其他瀏覽器無法可靠地實現它們（需要引用！）。

在動手之前，我使用了YUI（雅虎用戶界面）Javascript庫來為我全部處理這些。

這是有關如何使用這兩個事件的鏈接：http: //yuilibrary.com/yui/docs/event/mouseenter.html

袖手旁觀是非常方便的技巧-如果您能夠使用3rd party 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>