Question 44669 in Html Question posted in
Some basic documentation can be found here.

Change color of h1, h2, h3 when hover over parent – Html

I would like the color of the h1, h2, and h3 elements to change when I hover over their parent div.
The parent div has the CSS class.a and the div that contains the h1, h2, h3 has the class b.

My CSS code is:

.a:hover .b{
  background-color: red;
  color: white;
}

This however only works for the background color. The color of the h1, h2, and h3 elements (which I want to turn white on hover) is not being affected.
What am I missing here?

Tags:

2

Answers


  1. 0

    You will have to select the elements individually mostly because the h1 h2 colors might be getting overridden from another css rule(it’s hard to guess from the code in question). So changing color using your code may not work

    This covers only one element, but should help you get started

    .a:hover .b h1 {
color: red;
}
    <div class="a">
<p>some sample text</p>
<div class="b">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
</div>
</div>
    Login or Signup to reply.
  2. 0

    You can try this. It targets all titles at once, regardless of how many there are, but to the same color. If you want different colors you need to target them individually.

    .a {
  border: 1px solid red;
  padding: 10px;
}

.a:hover .b > * {
  color: green;
}
    <div class="a">
  <div class="b">
    <h1>Some title</h1>
    <h2>Another title</h2>
    <h3>Last title</h3>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search