如何根据悬停的链接显示div？

要根据悬停的链接显示一个div，你可以使用HTML和CSS来实现这个效果。以下是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Link Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="#" class="hover-link">Hover over me</a>
    <div class="popup" id="popup">
        This is the popup content.
    </div>
</body>
</html>

CSS (styles.css)

.hover-link {
    position: relative;
    display: inline-block;
    padding: 10px;
    background-color: #f0f0f0;
    text-decoration: none;
    color: #333;
}

.popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

JavaScript (可选，用于更复杂的交互)

如果你需要更复杂的交互，可以使用JavaScript来控制div的显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Link Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="#" class="hover-link">Hover over me</a>
    <div class="popup" id="popup">
        This is the popup content.
    </div>

    <script>
        document.querySelector('.hover-link').addEventListener('mouseenter', function() {
            document.getElementById('popup').style.display = 'block';
        });

        document.querySelector('.hover-link').addEventListener('mouseleave', function() {
            document.getElementById('popup').style.display = 'none';
        });
    </script>
</body>
</html>

解释

HTML部分：创建一个链接和一个div，并给它们分别添加类名和ID。
CSS部分：
- .hover-link：设置链接的基本样式，并使其相对定位，以便其子元素（如div）可以绝对定位。
- .popup：设置div的初始状态为隐藏（display: none），并使其绝对定位在链接下方。