如何不使用js實現滑鼠hover彈出選單效果

violinux666發表於2018-10-16
JS

最近看到很多同學在實現滑鼠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，這樣動畫會有更好的效能。

相關文章