如何仅hover包裹图片的a标签内h1时触发标题文字变色效果

数据老陈

2026-8-30

实现方案

你不需要修改现有HTML结构，只需要调整CSS的hover选择器触发范围即可：

原代码的.hero-one a:hover选择器会在鼠标悬停到<a>标签包裹的任意子元素（图片、标题）时，都触发a标签的文字颜色变化，不符合需求
直接将hover状态绑定到<h1>元素本身，就可以实现仅鼠标悬停在标题上时才触发文字变色，同时保留整个a标签区域的跳转功能

调整后的完整CSS代码

a {
  text-decoration: none;
}
.mt-3 {
  margin-top: 1.5rem;
}
.text-light {
  color: #9c9c9c;
}
.home-banner-img {
  border-radius: 2px;
  height: 100px;
  width: 100%;
}

.hero-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 30px;
}

/* 替换原有a:hover规则，仅在悬停h1时触发标题变色 */
.hero-one a h1:hover {
  color: #00639e;
}