将鼠标悬停在一个 div 上时触发两个 div
我有两个这样的 div,它们被放置在我网站的页脚中:
这是我的代码:
.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;
}
有没有办法通过将鼠标悬停在大盒子上来触发两者?
I have two divs like so and they are placed in the footer of my website :
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
是的,只需将它们拴在大盒子上即可。
.bigbox:悬停 .upNextBanner{
ETC....
}
.bigbox:悬停 .upNextCard{
....
}
Yes, just chain them for a hover on the big box.
.bigbox:hover .upNextBanner{
Etc....
}
.bigbox:hover .upNextCard{
....
}
如果您发布 html 代码来查看 div 之间的关系,
请查看此 https:// /www.w3schools.com/css/css_combinators.asp
它可能会帮助你
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