將鼠標懸停在父元素上只會影響其自己的文本，而不會影響子元素

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/

我讀過了與此類似的其他一些做題，但他們中的很多人似乎都使用jQuery。有沒有什麼辦法可以簡單地用CSS來做到這一點，而不需要深入研究JS？謝謝。

Answer 1

您可以將h1更改爲懸停的顏色，同時將span保持爲h1黑色。

h1:hover { 
 
    color: red; 
 
} 
 

 
h1:hover span { 
 
    color: black; 
 
}

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