CODEWITHSUNDEEP
csscss-selectors
Rajat Gupta
Rajat Gupta

Reputation: 26589

Style child element when hover on parent

How to change the style of child element when there is hover on parent element. I would prefer a CSS solution for this if possible. Is there any solution possible through :hover CSS selectors. Actually I need to change color of options bar inside a panel when there is an hover on the panel.

Looking to support all major browsers.

Upvotes: 266

Views: 238302

Answers (4)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

Yes, you can do this use this below code it may help you.

.parentDiv {
  margin: 25px;
}

.parentDiv span {
  display: block;
  padding: 10px;
  text-align: center;
  border: 5px solid #000;
  margin: 5px;
}

.parentDiv div {
  padding: 30px;
  border: 10px solid green;
  display: inline-block;
  align: cente;
}

.parentDiv:hover {
  cursor: pointer;
}

.parentDiv:hover .childDiv1 {
  border: 10px solid red;
}

.parentDiv:hover .childDiv2 {
  border: 10px solid yellow;
}

.parentDiv:hover .childDiv3 {
  border: 10px solid orange;
}
<div class="parentDiv">
  <span>Hover me to change Child Div colors</span>
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
</div>

Upvotes: 22

m Qmarsi
m Qmarsi

Reputation: 85

you can use this too

.parent:hover * {
   /* ... */
}

Upvotes: 4

jtbandes
jtbandes

Reputation: 118651

Yes, you can definitely do this:

.parent:hover .child {
   /* ... */
}

This uses the :hover pseudoclass to restrict to elements matching .parent which are also hovered, and the descendant combinator (space) to select any descendant that matches .child.

Here's a live example:

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}
<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

Upvotes: 477

decipher
decipher

Reputation: 148

While the accepted solution is correct, the hover styles are being applied to both the parent and child element. This is because the parent contains the child inside its "box".

If anyone, for whatever reason, is curious about how to apply styles to a child element only when the parent is hovered, try this:

.parent {
    height: 100px;
    width: 100px;

    background-color: blue;
}

.parent:hover .child {
    background-color: red;
}

.child {
    height: 100px;
    width: 100px;
    margin-left: 100px;

    background-color: green;
    pointer-events: none; /* this line does the trick */
}
<div class="parent">
    <div class="child"></div>
</div>

Upvotes: 2

Related Questions