网页链接:hover悬停效果失效问题求助

问题描述 #

我想给网页里的链接加:hover悬停效果，之前做的网站这个功能都正常，但现在这个网站的悬停效果就是不生效。我按之前的写法写代码，用浏览器开发者工具加相同代码时效果正常。试过调整display属性、修改z-index都没用，就连给logo加悬停效果也失败了。

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clay Romero</title>
    <link rel="stylesheet" type="text/css" href="./main.css"/>
</head>


<body>
    <header>
        <nav>
            <h1>Author Name</h1>

            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a class="" href="#">Books</a></li>
                <li><a class="" href="#">About</a></li>
                <li><a class="" href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="grid-container">
            <img src="./images/newBook.png" alt="Book Model"/>
            <h2 class="book-title">BOOK TITLE</h2>
            <h4 class="sub-text">My new book, <i>"This is A Book Title"</i> has just been released</h4> 

        </div>
    </header>

<main>

</main>

</body>
</html>

我的CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@800&display=swap");
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
}

header {
  position: relative;
  background-image: url("./images/Background-Asset.jpg");
  background-size: cover;
  height: 80vh;
  width: 100%;
}
header nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: transparent;
  z-index: 99;
}
header nav h1 {
  font-family: "Bodoni Moda", serif;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  font-size: 3rem;
  padding-left: 2rem;
  cursor: pointer;
}
header nav ul {
  display: flex;
  list-style: none;
  padding-right: 4rem;
  padding-top: 2rem;
}
header nav ul li {
  padding: 0 3rem;
}
header nav ul li a {
  display: inline;
  text-decoration: none;
  color: white;
  font-size: 1.9rem;
}
header nav ul li a a:hover {
  border-bottom: 2px solid white;
}

.active {
  border-bottom: 2px solid white;
}

问题解决 #

核心错误 #

你的CSS中hover选择器存在语法错误：

header nav ul li a a:hover { /* 多写了一个a，匹配不到任何元素 */
  border-bottom: 2px solid white;
}

HTML结构里<li>直接包含<a>标签，不存在嵌套的<a>，所以这个选择器无法匹配到目标元素，导致hover效果完全不生效。

修正后的CSS代码 #

将错误的选择器替换为：

header nav ul li a:hover {
  border-bottom: 2px solid white;
}

补充：给logo（h1）添加hover效果 #

如果需要让顶部的Author Name也有悬停效果，可以添加以下代码：

header nav h1:hover {
  color: #eee; /* 可根据需求修改悬停样式 */
}

额外提示 #

• 全局样式中的overflow: hidden可能会在后续开发中导致元素截断或交互异常，建议仅针对需要的元素设置该属性，而非全局应用。
• 确认CSS文件路径正确，确保浏览器能正常加载main.css。

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