内部超链接触发整页hover效果的HTML/CSS问题求助

问题修复方案 #

核心问题分析

1. 全局hover样式污染：你写的 :hover是无限制全局选择器，会对页面所有元素的hover状态生效，导致整页文字变色变斜体。
2. 链接路径错误：使用/Break.html是绝对路径，本地测试时会指向系统根目录，若目标文件和当前页面在同一文件夹，需改用相对路径。

修正后的CSS代码

body {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  padding: 0;
  margin: 0;
  font-family: system-ui, serif;
}

.sidebar {
  height: 200vh;
  font-size: 4rem;
  text-align: center;
  color: grey;
  background-color: yellow;
}

.content {
  padding: 2rem;
  color: black;
  background-color: lightblue;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
}

.white {
  font-family: system-ui, serif;
  color: red;
}

/* 仅针对侧边栏的链接hover状态生效 */
.sidebar a:hover {
  color: rgb(255, 199, 209);
  font-style: italic;
}

修正后的HTML代码

<div class="sidebar">
  <ul>
    <li><a href="Break.html" class="white">The River</a></li>
    <li><a href="Break.html" class="white">The River</a></li>
    <li><a href="Break.html" class="white">The River</a></li>
    <li><a href="Break.html" class="white">The River</a></li>
    <li><a href="Break.html" class="white">The River</a></li>
    <li><a href="Break.html" class="white">The River</a></li>
  </ul>
</div>
<p class="content">
  cto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?
</p>

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