详情摘要h4悬停颜色

Question

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

Codepen - actual code starts @ line 62（第 1-59 行只是设置环境样式，以便我的代码可预测地转移到我的主题）

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

Answer 1

您需要将 :hover 移动到父元素：

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