I have two divs like so and they are placed in the footer of my website :

divs in question

And here is my code :

.upNextCard{
  /* Rectangle 68 */

  position: absolute;
  width: 214.29px;
  height: 255.69px;
  margin-left:300px;
  margin-top:139px;
  background-color:#E0B21C;
  transform: rotate(-12.08deg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
  pointer-events: visible;

}

.upNextCard:hover {
  margin-top: 120px;
}

.upNextBanner{
  /* Rectangle 69 */
  position: absolute;
  width: 65.31px;
  height: 47.17px;
  background: #FE9C9C;
  transform: rotate(-12.45deg);
  margin-left: 400px;
  margin-top: 98px;
  pointer-events: visible;

}

Is there a way I can trigger both by hovering over the big box?

CodePudding user response：

It would be easier if you post you html code to see the relation amongst divs

look at this https://www.w3schools.com/css/css_combinators.asp

it may help you

CodePudding user response：

Yes, just chain them for a hover on the big box.

.bigbox:hover .upNextBanner{ Etc.... }

.bigbox:hover .upNextCard{ .... }