'Removing Hover effect on specific tag

How can I remove the hover effect on my 'h3' tag (lighter grey hover effect). It should still be link that is why i put it inside of my 'a' tag.

.speakers a {
    color: var(--clr-grey);
}

.speakers a:hover {
    color: var(--clr-lgrey);
}
<div class="speakers">
  <a href="#">
      <h3>Tessa Harmon</h3>
      Crafty Coding: Generating Knitting Patterns
  </a>
  <a href="#">
      <h3>Russ Unger</h3>
      From Muppets to Mastery: Core UX Principles from Mr. Jim Henson
  </a>
</div>
htmlcss


Solution 1:[1]

Well then just overwrite the color of the h3 when hovering a. See bellow.

.speakers a:hover {
color:blue; /* example purpose */
}

.speakers a {
    color: grey;
}


.speakers a:hover h3 {
  color: grey
  }
<div class="speakers">
  <a href="#">
      <h3>Tessa Harmon</h3>
      Crafty Coding: Generating Knitting Patterns
  </a>
  <a href="#">
      <h3>Russ Unger</h3>
      From Muppets to Mastery: Core UX Principles from Mr. Jim Henson
  </a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mihai T

Related Questions