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

user_18206501 0
Viewed 42

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

css html
3 Answers

You can set your

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

to

.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 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>

user_61610930

you can directly access the Element like this:

.mt-3: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;
}

.mt-3: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>

user_145235190

You need to replace this CSS

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

by

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

a>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>

user_163930020
Related