悬停在一个潜水器上时触发两个潜水器

Question

我有两个类似的div，它们被放在我网站的页脚：

有问题的divs

这是我的代码：

.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;
}

有没有一种方法我可以通过悬停在大盒子上来触发两者？

Answer 1

是的，只需将它们链接在大框上悬停即可。

.bigbox:hover.upNextBanner{等}

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

Answer 2

如果你发布html代码来查看div 之间的关系会更容易

看看这个https://www.w3schools.com/css/css_combinators.asp

它可能会帮助你