I'm trying to understand how to make 2 classes hover at same time-CodePudding

.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 ><a href="https://codepen.io/" ><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

CodePudding user response：

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 >
  <div ></div>
</div>

CodePudding user response：

use .one:hover .two . if you have hover on .one you change .two