1

I have a division with hole in between, when I rotate it on direct hover it works; but when I try to rotate it while hovering on another division #btn it doesn't work. I don't understand why?

I've made the hole using the :after element;

Here's my code:

/* This Part doesn't work (#btn:hover>.hollowBox) */
#btn:hover>.hollowBox {
  transform: perspective(800px) rotateY(25deg);
}

/* Following part works comment out the upper part and uncomment the code below */
/*.hollowBox:hover{
  transform: perspective(800px) rotateY(25deg);
}*/

.hollowBox {
  background: #ddd;
  position: relative;
  width: 60%;
  height: 40%;
}

.hollowBox:after {
  content: '';
  position: absolute;
  background: #222;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

#btn {
  background: wheat;
  padding: 0.3em
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #222;
}
<div class='hollowBox'></div><br><br>
<div id='btn'>Hover Me</div>
YourPalNurav
  • 1,204
  • 9
  • 40
  • 1
    `>` is the [child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) and hollowbox isn't a child of btn – j08691 Feb 25 '19 at 15:14
  • I had tried the same code with (#btn:hover + .hollowBox), (#btn:hover ~ .hollowBox) (#btn:hover .hollowBox) & (#btn:hover > .hollowBox), just like https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered suggests but nothing worked. – YourPalNurav Feb 25 '19 at 15:26
  • 1
    Of course this doesn’t work either, the elements are in the wrong order for that. You can only select downwards or to the right in the DOM with CSS, not upwards or to the left. – 04FS Feb 25 '19 at 15:28
  • 1
    you should understand the meaning of each selector and not only apply them. – Temani Afif Feb 25 '19 at 15:36

0 Answers0