在悬停时打开菜单，而不是使用jQuery单击

基础概念

悬停（Hover）是指鼠标指针停留在某个元素上。在网页设计中，悬停效果常用于提示信息、导航菜单等交互元素。通过CSS和JavaScript，可以实现当鼠标悬停在某个元素上时，显示或隐藏子菜单。

类型

纯CSS实现：通过CSS的:hover伪类实现悬停效果。
JavaScript实现：通过JavaScript监听鼠标事件（如mouseenter和mouseleave）来实现悬停效果。

应用场景

导航菜单：在网站的顶部或侧边栏，当用户将鼠标悬停在某个菜单项上时，显示该菜单项的子菜单。
工具提示：当用户将鼠标悬停在某个按钮或图标上时，显示该元素的详细信息或操作提示。

示例代码

纯CSS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Menu Example</title>
    <style>
        .menu-item {
            position: relative;
            display: inline-block;
            margin-right: 20px;
        }
        .sub-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .menu-item:hover .sub-menu {
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu-item">
        Menu Item 1
        <div class="sub-menu">
            Sub Menu Item 1.1
            <br>
            Sub Menu Item 1.2
        </div>
    </div>
    <div class="menu-item">
        Menu Item 2
        <div class="sub-menu">
            Sub Menu Item 2.1
            <br>
            Sub Menu Item 2.2
        </div>
    </div>
</body>
</html>

JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Menu Example</title>
    <style>
        .menu-item {
            position: relative;
            display: inline-block;
            margin-right: 20px;
        }
        .sub-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="menu-item" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
        Menu Item 1
        <div class="sub-menu">
            Sub Menu Item 1.1
            <br>
            Sub Menu Item 1.2
        </div>
    </div>
    <div class="menu-item" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
        Menu Item 2
        <div class="sub-menu">
            Sub Menu Item 2.1
            <br>
            Sub Menu Item 2.2
        </div>
    </div>

    <script>
        function showSubMenu(element) {
            element.querySelector('.sub-menu').style.display = 'block';
        }

        function hideSubMenu(element) {
            element.querySelector('.sub-menu').style.display = 'none';
        }
    </script>
</body>
</html>