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

Question

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

我的 HTML:

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

我的 CSS:

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

这是一个 jsfiddle:http://jsfiddle.net/9g1nmt9x/2/

我读过一些与此类似的其他 SO 问题，但其中很多似乎都使用 jQuery。有没有什么方法可以只用 CSS 而不深入研究 JS？谢谢。

Answer 1

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

h1:hover {
  color: red;
}

h1:hover span {
  color: black;
}

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