如何不使用js實現鼠標hover彈出菜單效果

最近看到不少同窗在實現鼠標hover彈出菜單的效果時都是用的js代碼去實現的，默認給彈出隱藏掉，經過js事件綁定動態的顯/隱彈出菜單元素。

<ul>
    <li>主頁</li>
    <li>新聞</li>
    <li id="more">更多</li>
    <div class="menu" id="menu">
        <ul>
            <li>退出登陸</li>
            <li>更改密碼</li>
        </ul>
    </div>
</ul>

<style>
    .menu{
        display: none;
    }
</style>
<script>
        window.onload=function(){
            var menu=document.getElementById('menu');
            var more=document.getElementById('more');
            more.addEventListener('mouseenter',function(){
                menu.style.display="block";
            });
            more.addEventListener('mouseleave',function(){
                menu.style.display="none";
            });
        }
</script>

這種寫法是比較流行的寫法，但這種寫法須要用到js，多多少少有一點不優雅。如今筆者向你們介紹一種使用css僞類結合子代選擇器的方式來實現一樣效果的辦法。

1.首先須要改變一下dom結構，彈出菜單div和按鈕之間改爲父子結構

<ul>
    <li>主頁</li>
    <li>新聞</li>
    <li id="more" class="more">
        <span>更多</span>
        <div class="menu" id="menu">
            <ul>
                <li>退出登陸</li>
                <li>更改密碼</li>
            </ul>
        </div>
    </li>
 
</ul>

2.將以前的script代碼通通刪掉，改用css僞類和子代選擇帶

.menu {
    display: none;
}
.more:hover>.menu{
    display: block;
}

就這樣就完成啦，代碼比以前精簡了很多，少了不少js變量，還不用擔憂dom事件綁定與解綁的問題。

若是想要有更好的用戶體驗，還能夠加上css3的過渡動畫。但須要注意的是元素默認display:none的話是不會有動畫效果的，須要把display:none;改爲visibility:hidden;

並且最好讓.menu脫離文檔流，比方說給它的position設置成fixed或者absolute，使用transform而不是left、top，這樣動畫會有更好的性能。