How to activate hover effect only on link which is wrapped around an image-CodePudding

I have this container with an image and heading, and I would like that only when you hover over the <h1>Title</h1> that the color changes. The thing is I have the <a> wrapped around the <img> and the <h1> to avoid making a duplicate <a> for each element. Is there any way around this?

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 >
  <div >
    <a href="#" >
      <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" >
      <h1 >This is a post</h1>
    </a>
  </div>
</div>

CodePudding user response：

You can set your

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

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

Like the example down bellow:

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 >
  <div >
    <a href="#" >
      <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" >
      <h1 >This is a post</h1>
    </a>
  </div>
</div>

CodePudding user response：

you can directly access the Element like this:

.mt-3:hover {
  color: #00639e;
}