使悬停在父元素上只影响它自己的文本，而不影响子元素

Question

尝试做一个很简单的效果。当您将鼠标悬停在 h1 上时，我只希望括号变成红色。 span 应该保持黑色。

我的HTML：

<h1>{ <span>js</span> }</h1>

我的CSS：

h1 span:hover {
 /* make the color of just the brackets red here */
}

我读过其他一些与此类似的 SO 问题，但其中很多似乎都使用了 jQuery。有什么方法可以在不深入研究 JS 的情况下仅使用 CSS 来简单地做到这一点？谢谢。

Answer 1

您可以让 h1 在悬停时改变颜色，同时保持 h1 内的 span 黑色。

h1:hover {
  color: red;
}

h1:hover span {
  color: black;
}

<h1>{ <span>js</span> }</h1>

Make hovering over a parent element only affect its own text, not child elements