详细信息摘要H4悬停颜色

Question

我试图在悬停时为详细摘要内的 h4 文本着色，但颜色更改仅在直接悬停在实际 h4 文本上时才会生效，如何修改我的 CSS 以在悬停在其他部分上时更改 h4 文本颜色摘要栏？

Codepen - 实际代码从第 62 行开始（第 1-59 行只是设置环境样式，以便我的代码可以预见地转移到我的主题）

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

Answer 1

您需要移动：悬停到父元素：

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