csscss-selectorshoverhtml-tag-detailshtml-tag-summary

Details summary h4 hover color

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);
}
Solution

  • 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);
}