将鼠标悬停在父元素上仅影响其自己的文本，而不影响子元素

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更改颜色，同时将span保持在h1黑色内。

h1:hover {
  color: red;
}

h1:hover span {
  color: black;
}

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