CODEWITHSUNDEEP
htmlcsshover
SystemX
SystemX

Reputation: 539

How to change the properties of a hovered parent's children

Using CSS, how can I change the properties of a child when the parent is hovered?

Upvotes: 1

Views: 44

Answers (2)

Aaron
Aaron

Reputation: 10430

.parent:hover .first-child {
  background: red;
}
.parent:hover .second-child {
  background: blue;
}
.parent:hover .third-child {
  background: green;
}
<div class="parent">
  <div class="first-child">Lorem Ipsum</div>
  <div class="second-child">Lorem Ipsum</div>
  <div class="third-child">Lorem Ipsum</div>
</div>

Upvotes: 1

Random Logic
Random Logic

Reputation: 132

Select the parent element and use the :hover pseudo class, then select the child you want to change the properties of.

.wrp {
    padding: 15px;
}
.wrp:hover .hvr {
    background: #FFFF33;
}
<div class="wrp">
    <span class="hvr">Hover my parent</span>
</div>

Upvotes: 1

Related Questions