Transition not triggering when hovered over

Question

When I try to make a cube transition inside of a container when the trigger div is hovered over but it isn't triggering the transition. However, if I swap out the id of the trigger with something that isn't a class or id lets say body it works! The moment I switch it out for something that has a class or id again it stops working!

https://codepen.io/anon/pen/PEwoXb

pre {
  background-color: cornflowerblue;
  color: white;
  margin: 5px auto 5px auto;
  width: 50%;
  padding: 5px;
}

.trans-box-holder {
  display: block;
  background: #ffffff;
  height: 250px;
  border: 1px cornflowerblue solid;
}

.trans-box {
  display: inline-block;
  background: pink;
  width: 100px;
  height: 100px;
}

#trans_box_1 {
  transition: transform 300ms ease-in-out 0s;
}


/* If you swap out #pre_opacity for body it works for some reason! */

#pre_opacity:hover #trans_box_1 {
  transform: translate(200px, 150px) rotate(20deg);
}

<pre id="pre_opacity">
        .element {
            transition: opacity 300ms ease-in-out 1s;
        }
    </pre>
<div class="trans-box-holder">
  <div class="trans-box" id="trans_box_1"></div>
</div>

Answer 1

Change :

#pre_opacity:hover #trans_box_1 {

To:

#pre_opacity:hover + .trans-box-holder #trans_box_1 {

pre {
    background-color: cornflowerblue;
    color: white;
    margin: 5px auto 5px auto;
    width: 50%;
    padding: 5px;
}

.trans-box-holder {
    display: block;
    background: #ffffff;
    height: 250px;
    border: 1px cornflowerblue solid;
}

.trans-box {
    display: inline-block;
    background: pink;
    width: 100px;
    height: 100px;
}

#trans_box_1 {
    transition: transform 300ms ease-in-out 0s;
}
/* If you swap out #pre_opacity for body it works for some reason! */
#pre_opacity:hover + .trans-box-holder #trans_box_1 {
    transform: translate(200px, 150px) rotate(20deg);
}

<!-- The trigger -->
<pre id="pre_opacity">
    .element {
        transition: opacity 300ms ease-in-out 1s;
    }
</pre>
<div class="trans-box-holder">
  <div class="trans-box" id="trans_box_1"></div>
</div>

Answer 2

Q: "When I try to make a cube transition inside of a container when the trigger div is hovered over but it isn't triggering the transition. ..."

A: The reason the cube isn't transitioning is because you are using a triggering element(#pre_opacity) that is not a parent of the target element(#trans_box_1 .trans-box) you want to transition.

You can add the :hover pseudo-class to the targeted element's parents( #body or .trans-box-holder) so that when either is hovered the cube will transition.

For example:

    .trans-box-holder:hover .trans_box {
        transform: translate(200px, 150px) rotate(20deg);
    }

Edit: Noopur Dabhi and Ylama have a better solution using the tilde and plus selector.

Answer 3

target it using ~

pre {
    background-color: cornflowerblue;
    color: white;
    margin: 5px auto 5px auto;
    width: 50%;
    padding: 5px;
}

.trans-box-holder {
    display: block;
    background: #ffffff;
    height: 250px;
    border: 1px cornflowerblue solid;
}

.trans-box {
    display: inline-block;
    background: pink;
    width: 100px;
    height: 100px;
}

#trans_box_1 {
    transition: transform 300ms ease-in-out 0s;
}
/* If you swap out #pre_opacity for body it works for some reason! */
#pre_opacity:hover ~ .trans-box-holder #trans_box_1 {
    transform: translate(200px, 150px) rotate(20deg);
}

#pre_opacity:hover{
  cursor: pointer;
}

<p class="example"></p>

<!-- The trigger -->
<pre id="pre_opacity">
    .element {
        transition: opacity 300ms ease-in-out 1s;
    }
</pre>
            <div class="trans-box-holder">
                <div class="trans-box" id="trans_box_1"></div>
            </div>

The #trans_box_1 is a sibling of the container. Using ~ targets anything after the parent target which in this case could be pre or #pre_opacity or pre#pre_opacity

I also put an example tag as <p class="example"></p> just to explain better, you can also target the hover effect then like this .example:hover ~ .trans-box-holder #trans_box_1 as the target is still after the parent <p> tag.

CSS Selectors Reference

Answer 4

The reason why it is working for body is, you have css :

#pre_opacity:hover #trans_box_1 {
  transform: translate(200px, 150px) rotate(20deg);
}

what it means is, it will applied if and only if you have child having id #trans_box_1 inside a div(or some other html tag) having id #pre_opacity.

When you replaced #pre_opacity with body, the above condition will passed and hover will work.

To make it work, you need to add sibling selector '+' or '~'

you css will be like this :

#pre_opacity:hover + .trans-box-holder #trans_box_1 {
    transform: translate(200px, 150px) rotate(20deg);
}

Here is working fiddle : https://jsfiddle.net/kmm2q6y4/

For more sibling selectors, check this out : https://css-tricks.com/child-and-sibling-selectors/

Answer 5

Jquery will make your life a lot easier

---

$('#pre_opacity').hover(function() {
  $('#trans_box_1').addClass('transClass');
}, function() {
  $('#trans_box_1').removeClass('transClass');
});

pre {
  background-color: cornflowerblue;
  color: white;
  margin: 5px auto 5px auto;
  width: 50%;
  padding: 5px;
}

.trans-box-holder {
  display: block;
  background: #ffffff;
  height: 250px;
  border: 1px cornflowerblue solid;
}

.trans-box {
  display: inline-block;
  background: pink;
  width: 100px;
  height: 100px;
}

#trans_box_1 {
  transition: transform 300ms ease-in-out 0s;
}


/* If you swap out #pre_opacity for body it works for some reason! */

.transClass {
  transform: translate(200px, 150px) rotate(20deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<pre id="pre_opacity">
        .element {
            transition: opacity 300ms ease-in-out 1s;
        }
    </pre>
<div class="trans-box-holder">
  <div class="trans-box" id="trans_box_1"></div>
</div>