css鼠标经过显示下拉

基础概念

CSS 鼠标经过显示下拉是一种常见的网页交互效果，通常用于导航菜单。当用户将鼠标悬停在某个菜单项上时，会显示一个下拉菜单，提供更多的选项或链接。

类型

纯 CSS 实现：通过 CSS 的 :hover 伪类来实现鼠标悬停时的下拉效果。
JavaScript 辅助：结合 JavaScript 来实现更复杂或动态的下拉效果。

应用场景

导航菜单
子菜单
工具提示
图标展开

示例代码（纯 CSS 实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Dropdown</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>Menu</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</body>
</html>

参考链接

CSS Hover Dropdown Tutorial

常见问题及解决方法

问题：下拉菜单显示位置不正确

原因：可能是由于 position 属性设置不当导致的。

解决方法：确保 .dropdown-content 的 position 属性设置为 absolute，并且 .dropdown 的 position 属性设置为 relative。

.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
}

问题：下拉菜单在移动设备上不显示

原因：移动设备通常不支持鼠标悬停事件。

解决方法：使用 JavaScript 来检测触摸事件，并在触摸时显示下拉菜单。

document.querySelector('.dropdown').addEventListener('touchstart', function() {
    document.querySelector('.dropdown-content').style.display = 'block';
});

通过以上方法，可以有效解决 CSS 鼠标经过显示下拉菜单时遇到的常见问题。