HTML/CSS - 为什么我的 a:hover 在 div 中不工作？

Question

正如标题所说，我花了大约一个小时，但我不明白为什么它不起作用。

我只是想在悬停按钮 (a) 时更改颜色和 background-color，但是，即使在其他网站上我对类似代码没有问题，但在这个网站上似乎没有上班。

请帮帮我，我要疯了。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio 2</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Main -->
    <section id="main">
      <div class="container">
        <p>Hello, my name is</p>
        <p><span>M</span>ateusz <span>L</span>ipski</p>
        <a href="">MY PORTFOLIO</a>
      </div>
    </section>
    <!-- End Main -->
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2? 
family=Dosis:wght@200;300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Dosis", sans-serif;
}
span {
  color: rgb(9, 189, 165);
  font-weight: 600;
}
.program {
  font-size: 1.2rem;
  margin-bottom: 25px;
}
/* Main */
#main {
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
  background-size: cover;
  background-position: top-center;
  z-index: -1;
}
#main::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.3;
  z-index: -1;
}
#main .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
}
#main .container p {
  position: relative;
  color: transparent;
  font-size: 2.5rem;
  font-weight: 500;
  margin-right: 300px;
  line-height: 4rem;
  animation: p_reveal 0.1s ease forwards;
}
#main .container p:first-of-type {
  animation-delay: 1.2s;
}
#main .container p:nth-of-type(2) {
  animation-delay: 2.7s;
}
#main .container span {
  color: transparent;
  animation: span_reveal 0.1s ease forwards;
  animation-delay: 2.7s;
}
#main .container p::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  left: 0;
  background-color: rgb(9, 189, 165);
  overflow: hidden;
  animation: box_reveal 1.5s ease forwards;
}
#main .container p:first-of-type::after {
  animation-delay: 0.5s;
}
#main .container p:nth-of-type(2)::after {
  animation-delay: 2s;
}
#main .container a {
  padding: 10px 30px;
  margin-right: 300px;
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  text-decoration: none;
  border: 3px solid rgb(9, 189, 165);
  color: rgb(9, 189, 165);
}
#main .container a:hover {
  color: white;
  background-color: rgb(9, 189, 165);
}
/* End Main */

Answer 1

您的主元素上有一个 z-index，因此您无法将鼠标悬停在您的元素上。例如，如果您将 main 上的 z-index 设置为 1，它将起作用。

/* Main */
#main {
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
  background-size: cover;
  background-position: top-center;
  z-index: -1;
}

编辑：确切地说是这个块。

HTML/CSS - 为什么我的 a:hover 在 div 中不工作？

HTML/CSS - Why isn't my a:hover inside a div working?

html

css

hover