Skip to content
Advertisement

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

Advertisement

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>
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement