Search code examples
javascripthtmlcsshtml5-canvashover

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?

Solution

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

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

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