如何仅用HTML和CSS实现鼠标悬停显示链接并点击跳转新页面？

明确结论：只用HTML和CSS完全可以实现该需求，无需JavaScript。以下是具体实现步骤与代码：

1. 调整HTML结构并完善链接属性 #

• 给两个链接补充跳转地址，同时添加target="_blank"属性，实现点击在新页面打开
• 将Games文本与链接容器放在同一父容器中，方便CSS关联控制（也可保留原结构用相邻兄弟选择器，但同容器逻辑更清晰）

修改后的HTML代码：

<html>
<head>
    <title>Sports</title>
    <style>
        /* 嵌入CSS样式 */
    </style>
</head>
<body>
<nav class="dropdown">
    <p class="trigger">Games</p>
    <div class="links">
        <a href="你的足球页面地址" target="_blank">Football</a>
        <a href="你的篮球页面地址" target="_blank">Basketball</a>
    </div>
</nav>
</body>
</html>

2. 编写CSS实现悬停交互 #

核心逻辑：默认隐藏链接容器，鼠标悬停在Games文本（或其父容器）时显示链接，同时可添加基础样式优化交互体验：

/* 默认隐藏链接容器 */
.dropdown .links {
    display: none;
    /* 可选：设置下拉菜单样式 */
    position: absolute;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 鼠标悬停触发容器时，显示链接 */
.dropdown:hover .links {
    display: flex;
}

/* 可选：给触发文本加指针样式，提示可交互 */
.dropdown .trigger {
    cursor: pointer;
    margin: 0;
    padding: 8px;
}

可选：基于原HTML结构的实现 #

如果不想调整原结构，可通过相邻兄弟选择器实现：

/* 默认隐藏链接div */
body > div {
    display: none;
}
/* 鼠标悬停在nav上时，显示相邻的div */
nav:hover + div {
    display: block;
}

注：此方式耦合性较强，不如调整结构灵活。

内容的提问来源于stack exchange，提问作者Debasis Sahu