Removing Hover effect on specific tag-CodePudding

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

CodePudding user response：

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