Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Roven Loo
Roven Loo
7,834 Points
Posted by Roven Loo
Roven Loo
7,834 Points

How to prevent child element affected by parent's hover state?

Here's an example code. There are 2 circles stacked on top of each other. How do I make the red circle (the child) NOT "grow" and the blue circle (the parent) to "grow"?

<div class="wrap">
  <div class="parent">
    <div id="child">
    </div>
  </div>
</div>

.wrap {
    box-sizing: border-box;
    background:#fff;
    width: 200px;
    height: 200px;
    padding: 20px 0 0 20px;
  margin: 100px 0 0 100px;
}

.parent {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #09F;
    transition: all 0.5s ease;
    opacity: 0.1;
  margin: 100px 0 0 100px;
}

.wrap:hover > .parent {
    transform: scale(1.3);
    opacity: 1;
}

#child{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #F66;
    z-index: 10;
    position: absolute;
    margin: 10px 0 0 10px;
}

3 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ahh. I's sorry i misunderstood the initial questions. In order to accomplish that this is what i did. Basically you want to apply a negative scale on hover. so you apply the positive scale to the parent div and a negative scale to the child. Example Here.

.wrap {
    box-sizing: border-box;
    background:#fff;
    width: 200px;
    height: 200px;
    padding: 20px 0 0 20px;
  margin: 100px 0 0 100px;
}

.parent {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #09F;
    transition: all 0.5s ease;
    opacity: 0.1;
  margin: 100px 0 0 100px;
}

.wrap:hover > .parent {
    transform: scale(1.3);
    opacity: 1;
}

.wrap:hover > .parent #child {
    transform: scale(.8);
}

#child{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #F66;
    z-index: 10;
    position: absolute;
    margin: 10px 0 0 10px;
    transition: all 0.5s ease;
}
Roven Loo
Roven Loo
7,834 Points
Roven Loo
Roven Loo
7,834 Points

That's it! that makes a lot of sense :) thank you very much for helping and being patient with me! Cheers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

You can't really prevent it, but you can offset it. You'd have to set the scale of the child to the inverse of the scale you're setting the parent to:

.wrap:hover > .parent > #child {
  transform: scale(calc( 1 / 1.3));
  opacity: 1;
}

calc() used like that is a little shaky. It'd be best to either use sass/less or a manual input.

1/1.3 is equal to about 0.76923

.wrap:hover > .parent > #child {
  transform: scale(0.76923);
  opacity: 1;
}

Also, add a transition to the #child element:

#child {
  /* ...
    Your other code
   ...*/
  transition: all 0.5s ease;
}

codepen example

Roven Loo
Roven Loo
7,834 Points
Roven Loo
Roven Loo
7,834 Points

This is perfect :) Thank you very much for helping me out!

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

You can simplify it by just creating the child element and replicating the parent div as a border instead with rgba values. 

<div class="wrap">
    <div class="child"></div>
</div>

.wrap {
    box-sizing: border-box;
    background:#fff;
    width: 200px;
    height: 200px;
    padding: 20px 0 0 20px;
    margin: 100px 0 0 100px;
}

.child{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 10px solid rgba(0, 153, 255, .25);
    background: rgba(255, 102, 102, .25);
    transition: all 0.5s ease;
}

.child:hover {
    border: 10px solid rgba(0, 153, 255, 1);
    transform: scale(1.3);
}
Roven Loo
Roven Loo
7,834 Points
Roven Loo
Roven Loo
7,834 Points

The thing is I want the blue one to "grow" without the red one "growing". thanks for answering though