Prioritizing tag:hover functions

I want to apply two different colors to my title (h1). I saw online the best way to accomplish this would be to apply a span tag on the word I wanted to have a second color for. Now I want to apply a hover effect that makes the colors invert. It works for the span:hover function but not the h1:hover. plz help…

This is my code.

body{
  background-color: #BDBDBD;
}
span{
  font-size: 42px;
  color: #4A148C;
      
}
h1{
  font-size: 42px;
  color: #FF4081;
 }

h1:hover{
  color: #4A148C;
}

span:hover{
  font-size: 84px;
  color: #FF4081;
}
h1{
  font-size: 42px;
  color: #FF4081;
 }

h1 > span {
  color: #4A148C;
}

h1:hover {
  color: #4A148C;
}

h1:hover > span {
  font-size: 84px;
  color: #FF4081;
}

It’s the h1 you need to apply the hover to

AWESOME! Thanks alot. I was unaware of the > option. That’ll come in handy in the future I’m sure.

1 Like

Note that h1 span { will.work fine in this instance, I just used ` it to make the h1/span relationship more explicit (will only work for a span that is a direct descendant of h1)