Resolved: How to activate hover effect only on link which is wrapped around an image

Question:

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 class="hero-wrapper">
  <div class="hero-one">
    <a href="#" class="text-light">
      <img decoding="async" 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>

Answer:

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 class="hero-wrapper">
  <div class="hero-one">
    <a href="#" class="text-light">
      <img decoding="async" 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>

If you have better answer, please add a comment about this, thank you!

Resolved: How to activate hover effect only on link which is wrapped around an image

Resolved: How to compare two text files and and change the sign of the data in powershell?

Resolved: Java Virtual Machines deleted

Resolved: PyCharm cannot see my newly compiled .pyc see on import

Leave A Reply