Style an element inside a div on hover of the div

Question

I have the following:

h3 {
  color: lightseagreen;
}

p {
  color: rgb(0, 0, 0)
}

.section:hover {
  color: rgb(237, 50, 237)
}

<div class="section">
  <h3>Title</h3>
  <p>Lorem Ipsum</p>
</div>

There's more styling to the hover, but for simplicity I've only included the color property.

Essentially, I want the default color to be the light sea green, but on hover over the section div i want it to be pink. The p element I want to keep black at all times.

I understand that the h3 ruleset is more specific than the .section:hover ruleset and thus the h3 won't change on hover. I made another ruleset to apply to h3:hover but that would only change color when I hovered over the h3 block.

How can I get the pink color to apply to the h3 when its parent is hovered?

consider this answer if you want to change many properties with only one hover declaration: https://stackoverflow.com/a/50667198/8620333 — Temani Afif, Oct 04 '19 at 14:34

score 1 · Answer 1 · answered Oct 04 '19 at 14:18

1

You need to specify the element inside it.

h3 {color: lightseagreen;}
p {color: rgb(0,0,0)}

.section:hover h3 {
  color: rgb(237,50,237)
}

answered Oct 04 '19 at 14:18

Natixco

651
5
20

Thanks Natixco, however this doesn't work as the style now only applies to the h3 elements within .section. You're right insofar as the information provided only really refers to the text color, but there's other styling on the hover that needs to apply to the div block (e.g. background color) - my fault for not being more specific. Thank you nonetheless. – jdeelee Oct 04 '19 at 14:29
1

@jdeelee you add two styles `section:hover{}` and `section:hover h3{}` – Temani Afif Oct 04 '19 at 14:32

score 1 · Accepted Answer · answered Oct 04 '19 at 14:19

1

Change .section:hover to .section:hover > h3. This will change the color of the h3 when the section is hovered:

h3 {
  color: lightseagreen;
}

p {
  color: rgb(0, 0, 0)
}

.section:hover > h3 {
  color: rgb(237, 50, 237)
}

<div class="section">
  <h3>Title</h3>
  <p>Lorem Ipsum</p>
</div>

answered Oct 04 '19 at 14:19

j08691

204,283
31
260
272

1

perfect, thank you. I tried it and then it only applied the styling to h3 block. So i left the existing ruleset and created a new selector as you suggested for JUST the color which worked out. – jdeelee Oct 04 '19 at 14:42

Style an element inside a div on hover of the div

2 Answers2