CODEWITHSUNDEEP
htmlcsscss-selectors
Saad
Saad

Reputation: 53909

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

Trying to do a very simple effect. I want only the brackets to become red when you hover over the h1. The span should stay black.

My HTML: 

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

My CSS:

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

And here is a jsfiddle: http://jsfiddle.net/9g1nmt9x/2/

I've read a few other SO questions that were similar to this one, but a lot of them seem to use jQuery. Is there any way to simply do this with just CSS without delving into JS? Thanks.

Upvotes: 2

Views: 393

Answers (1)

Sumner Evans
Sumner Evans

Reputation: 9155

You can make the h1 change color on hover, while keeping the span inside the h1 black.

h1:hover {
  color: red;
}

h1:hover span {
  color: black;
}
<h1>{ <span>js</span> }</h1>

Upvotes: 4

Related Questions