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

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>