我想在我的"BOOK NOW"当用户将鼠标悬停在锚标记上时，还可以将文本颜色更改为白色。由于某些原因，文本颜色没有改变。我还注意到，我指定为100%的下划线的宽度，实际上是它的父元素的100%，而且下划线是低于锚标记的方式，它就在父元素结束的地方。
这是我的HTML和CSS代码/* Hero Section */
#hero {
color: white;
height: 80vh;
padding: 0 100px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h1{
margin:0;
font-size: 3.5rem;
font-weight: 900;
padding-bottom:3rem;
width: 40%;
}
#hero p{
margin:0;
font-size: 1.5rem;
font-weight: 400;
padding-bottom: 1.5rem;
width: 30%;
}
#hero a{
text-decoration: none;
color: #e50914;
font-size: 2rem;
font-weight: 700;
transition: 200ms ease-in-out;
}
#hero a:hover,{
color:white;
}
#hero a:hover::after{
content: "";
width: 100%;
height: 5px;
background: #e50914;
position: absolute;
bottom: 0px;
left: 20px;
}
.video-gradient{
}
.back-video {
position: absolute;
right: 0;
bottom: 0;
top: 0px;
min-width: 100%;
min-height: 80%;
width: auto;
height: auto;
z-index: -100;
}<body>
<section id="header">
<a href="#"><img src="images/logo.png" class="logo"></a>
<div>
<ul id="navbar">
<li><a class="active" href="why.html">Why Snap Smile</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href=""><i class="fa-solid fa-headset"></i></a></li>
</ul>
</div>
</section>
<section id="hero">
<h1>Get Your Hollywood Smile Today</h2>
<p>Show off your million dollar smile with your Snap Smile Veneers</p>
<a href="#">BOOK NOW</a>
</section>
</body>假设你想坚持当前的HTML结构，你所需要做的就是将position属性添加到#hero a选择器中，并给它relative的值。将#hero a:hover::after选择器的属性修改为
#hero a:hover::after{
content: "";
width: 100%;
height: 5px;
background: #e50914;
position: absolute;
bottom: 0px;
left: 0;
}
您可以通过阅读MDN和CSS Tricks的这些文章来了解更多关于CSS位置的信息。
链接的颜色在悬停状态下没有改变的原因是因为选择器上的花括号前有一个额外的逗号。删除这个，一切都应该像预期的那样工作。
body {
font-family: 'Montserrat', sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
/* Header Section */
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 80px;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.6629026610644257) 0%, rgba(9,9,121,0) 57%);
}
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
left: 20px;
}
.logo {
width: 10rem;
}
/* Hero Section */
#hero {
color: white;
height: 80vh;
padding: 0 100px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h1{
margin:0;
font-size: 3.5rem;
font-weight: 900;
padding-bottom:3rem;
width: 40%;
}
#hero p{
margin:0;
font-size: 1.5rem;
font-weight: 400;
padding-bottom: 1.5rem;
width: 30%;
}
#hero a{
text-decoration: none;
color: #e50914;
font-size: 2rem;
font-weight: 700;
transition: 200ms ease-in-out;
position: relative;
}
#hero a:hover {
color:white;
}
#hero a:hover::after{
content: "";
width: 100%;
height: 5px;
background: #e50914;
position: absolute;
bottom: 0px;
left: 0px;
}
.video-gradient{
}
.back-video {
position: absolute;
right: 0;
bottom: 0;
top: 0px;
min-width: 100%;
min-height: 80%;
width: auto;
height: auto;
z-index: -100;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Snap Smile</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
<!-- Styles Sheet -->
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/6b5d823830.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="header">
<a href="#"><img src="images/logo.png" class="logo"></a>
<div>
<ul id="navbar">
<li><a class="active" href="why.html">Why Snap Smile</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href=""><i class="fa-solid fa-headset"></i></a></li>
</ul>
</div>
</section>
<section id="hero">
<h1>Get Your Hollywood Smile Today</h2>
<p>Show off your million dollar smile with your Snap Smile Veneers</p>
<a href="#">BOOK NOW</a>
<!-- <video autoplay loop muted plays-inline class="back-video">
<source src="Videos/banner-video.mp4" type="video/mp4">
</video> -->
</section>
</body>
</html>你的CSS选择器设置错了#hero a:hover,{ ... }不应该在"hover"后面加上逗号
我还清理了下划线，并使其在悬停时逐渐淡入
body {
font-family: 'Montserrat', sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
/* Header Section */
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 80px;
background: rgb(0, 0, 0);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6629026610644257) 0%, rgba(9, 9, 121, 0) 57%);
}
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
left: 20px;
}
.logo {
width: 10rem;
}
/* Hero Section */
#hero {
color: white;
height: 80vh;
padding: 0 100px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h1 {
margin: 0;
font-size: 3.5rem;
font-weight: 900;
padding-bottom: 3rem;
width: 40%;
}
#hero p {
margin: 0;
font-size: 1.5rem;
font-weight: 400;
padding-bottom: 1.5rem;
width: 30%;
}
#hero a {
text-decoration: none;
color: #e50914;
font-size: 2rem;
font-weight: 700;
position: relative;
transition: 200ms ease-in-out;
}
#hero a::after {
content: "";
width: 100%;
height: 5px;
background: transparent;
position: absolute;
bottom: 0px;
left: 0;
transition: 200ms ease-in-out;
}
#hero a:hover { color: white }
#hero a:hover::after { background: #e50914 }
.video-gradient {}
.back-video {
position: absolute;
right: 0;
bottom: 0;
top: 0px;
min-width: 100%;
min-height: 80%;
width: auto;
height: auto;
z-index: -100;
}<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6b5d823830.js" crossorigin="anonymous"></script>
<section id="header">
<a href="#"><img src="images/logo.png" class="logo"></a>
<div>
<ul id="navbar">
<li><a class="active" href="why.html">Why Snap Smile</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href=""><i class="fa-solid fa-headset"></i></a></li>
</ul>
</div>
</section>
<section id="hero">
<h1>Get Your Hollywood Smile Today</h2>
<p>Show off your million dollar smile with your Snap Smile Veneers</p>
<a href="#">BOOK NOW</a>
<!-- <video autoplay loop muted plays-inline class="back-video">
<source src="Videos/banner-video.mp4" type="video/mp4">
</video> -->
</section>