如何让CSS Grid中的图标实现:hover悬停效果？

我是编程新手，正在做一个项目预览组件，想给GitHubIcon、LaunchIcon这类链接加上:hover效果，但用.linkItems:hover{background-color: red}甚至.title:hover{background-color: red}都没效果。用Chrome开发者工具时，只有强制触发hover才生效，不强制的话hover状态自动变灰，而且不在CSS Grid布局里时，hover效果是正常的。

组件代码 #

<li className={`${styles.gridContainer} ${props.className}`}>
  <div className={styles.imageWrapper}>
    <Image className={styles.image} src={props.imgSrc} alt="alt-picture" />
  </div>
  <div className={styles.projectContent}>
    <div className={styles.title}>
      <h2>{props.heading}</h2>
      <h1>{props.titleProject}</h1>
    </div>

    <div className={styles.projectDescription}>
      <SecondaryCard className={styles.descriptionCard}>
        {props.description}
      </SecondaryCard>
    </div>

    <ul className={styles.techStack}>
      {props.techStack.map((el) => {
        return (
          <li className={styles.techs} key={uuidv4()}>
            {el}
          </li>
        );
      })}
    </ul>

    <div className={styles.links}>
      <Link href={props.githubUrl}>
        <GitHubIcon className={styles.linkItems} />
      </Link>
      <Link href={props.deployUrl}>
        <LaunchIcon className={styles.linkItems} />
      </Link>
    </div>
  </div>
</li>

CSS代码 #

.gridContainer {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  list-style: none;
}

.gridContainer > div {
  position: relative;
}

.imageWrapper {
  grid-area: 1/3/-1/13;
  align-self: center;
  z-index: -1;
}

.projectContent {
  grid-area: 1/6/-1/15;
  align-self: center;
  text-align: right;
}
.title {
  color: var(--second-bg-heading);
}

.projectDescription {
  margin-top: 1rem;
}

.techStack {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
  color: var(--second-sub-headline);
}

.links {
  margin-top: 2rem;
}

.linkItems {
  margin-left: 5rem;
  transform: scale(2);
  color: var(--second-sub-headline);
  margin-right: 1rem;
}

.techs {
  list-style: none;
  margin-left: 1rem;
}

@media (max-width: 1200px) {
  .imageWrapper {
    opacity: 0.9;
    grid-column: 1/14;
  }
  .projectContent {
    transform: scale(0.9);
    grid-column: 7/17;
  }
}

@media (max-width: 768px) {
  .imageWrapper {
    opacity: 0.25;
    grid-column: 1/-1;
  }

  .image {
    border-radius: 10px;
  }

  .projectContent {
    grid-column: 1/-1;
    font-size: 1.5rem;
    text-align: left;
    align-self: center;
  }

  .title {
    padding: 0 3%;
    margin-bottom: 5%;
  }

  .projectDescription {
    margin: 3% 0;
    border-radius: 0;
    background-color: transparent;
    padding: 0 3%;
  }

  .techStack {
    justify-content: flex-start;
    padding: 0 3%;
    margin: 3% 0;
  }

  .techs {
    margin-right: 5%;
    margin-left: 0;
    margin-top: 0;
  }

  .links {
    padding: 0 10%;
    margin: 6% 0 6% 0;
    display: flex;
    justify-content: space-around;
  }

  .linkItems {
    margin-right: 0;
    margin-left: 0;
    transform: scale(2);
  }
}

@media (max-width: 600px) {
  .projectContent {
    transform: scale(0.8);
  }
}

@media (max-width: 480px) {
  .projectContent {
    font-size: 1rem;
  }
}

1. 修复堆叠层级问题 #

Grid容器会创建独立的堆叠上下文，imageWrapper的z-index: -1可能导致其与projectContent的层级关系异常，给projectContent添加z-index: 1确保它处于上层，鼠标事件能正常触发：

.projectContent {
  grid-area: 1/6/-1/15;
  align-self: center;
  text-align: right;
  z-index: 1; /* 新增 */
}

2. 禁止背景元素拦截鼠标事件 #

如果上述方法无效，给imageWrapper添加pointer-events: none，让鼠标事件直接穿透到上层的projectContent：

.imageWrapper {
  grid-area: 1/3/-1/13;
  align-self: center;
  z-index: -1;
  pointer-events: none; /* 新增 */
}

3. 提升hover样式优先级 #

确保hover样式的选择器优先级足够，避免被其他样式覆盖：

.links .linkItems:hover {
  background-color: red;
}

.title:hover {
  background-color: red;
}

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