如何仅在环绕图像的链接上激活悬停效果答案

【问题标题】：How to activate hover effect only on link which is wrapped around an image如何仅在环绕图像的链接上激活悬停效果
【发布时间】：2022-06-16 21:52:40
【问题描述】：

我有一个带有图像和标题的容器，我希望只有当您将鼠标悬停在 <h1>Title</h1> 上时颜色会发生变化。问题是我将<a> 包裹在<img> 和<h1> 周围，以避免为每个元素制作重复的<a>。有没有办法解决这个问题？

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;
}

.hero-one a:hover {
  color: #00639e;
}

<div class="hero-wrapper">
  <div class="hero-one">
    <a href="#" class="text-light">
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="hero-post" class="home-banner-img">
      <h1 class="mt-3">This is a post</h1>
    </a>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

你可以设置你的

.hero-one a:hover {
  color: #00639e;
}

到

.hero-one h1:hover {
  color: #00639e;
}

就像下面的例子：

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;
}

.hero-one h1:hover {
  color: #00639e;
}

<div class="hero-wrapper">
  <div class="hero-one">
    <a href="#" class="text-light">
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="hero-post" class="home-banner-img">
      <h1 class="mt-3">This is a post</h1>
    </a>
  </div>
</div>

【讨论】：