0

I am trying to color the h4 text inside a details summary upon hover, but the color change only takes effect when hovering DIRECTLY OVER the actual h4 text, how can I modify my CSS to change the h4 text color when hovering over other parts of the summary bar?

Codepen - actual code starts @ line 62 (lines 1-59 are just setting environment styles so that my code is predictably transferable to my theme)

.accordion-button:not([open]) h4:hover,
.accordion-button:not([open]) h4:focus {
  color: var(--color-button-text);
}
chad
  • 5
  • 1

1 Answers1

0

You need move :hover to the parent element:

.accordion-button:not([open]):hover h4,
.accordion-button:not([open]):focus h4 {
  color: var(--color-button-text);
}
vanowm
  • 9,466
  • 2
  • 21
  • 37