'Trigger two divs while hovering over one

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?

javascripthtmlcsshtml5-canvashover


Solution 1:[1]

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

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

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rmaxx
Solution 2 Efraim Jerszurki

Related Questions