I’m trying to understand how to make 2 classes hover at same time

.ellenon {
  box-sizing: border-box;
  width: 350px;
  height:350px;
  background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
  filter: grayscale(100%);
  color:white;
  transition: 0.5s;
}

.ellenon :where(h1, p) {
  line-height:1.5em;
  letter-spacing: 1.1px;
  padding-right: 10px;
  padding-left: 10px;
  transition: 0.5s;
}

.ellenon:hover {
  filter: grayscale(0%);
}

.ellenon h1:hover {
  transform: translate(0px, -20px);
  color:transparent;
  transition: 0.5s;
}

.ellenon p:hover {
   transform: translate(0px, 20px);
  color:transparent;
  transition: 0.5s;
}

.ellenon2:hover {
  transform: translate(0px, -20px);
  color:transparent;
}

<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>

Hello there, I am trying to create a simple CSS animation as you can see in my code. However, I can’t understand how to execute both hovers once the user hovers over the external div. Is this possible with raw CSS or JS is needed?

Thanks

Answer

You can select the .outer:hover and .outer:hover .inner so both will change when the outer is hovered

.outer{
  width:100px;
  height:100px;
  background-color:orange;
}
.inner{
  width:50px;
  height:50px;
  background-color:blue;
}
.outer:hover{
  background-color:green;
}
.outer:hover .inner{
  background-color:red;
}

<div class="outer">
  <div class="inner"></div>
</div>

Advertisement

Answer