在父悬停时同时设置父对象和子对象的动画,可以通过以下步骤实现:
下面是一个示例代码:
HTML:
<div id="parent">
<div id="child"></div>
</div>
CSS:
#parent {
width: 200px;
height: 200px;
background-color: blue;
transition: background-color 0.5s;
}
#child {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s;
}
#parent:hover {
background-color: green;
}
#parent:hover #child {
transform: scale(1.5);
}
JavaScript:
var parent = document.getElementById("parent");
parent.addEventListener("mouseover", function() {
parent.classList.add("hover");
var child = document.getElementById("child");
child.classList.add("hover");
});
parent.addEventListener("mouseout", function() {
parent.classList.remove("hover");
var child = document.getElementById("child");
child.classList.remove("hover");
});
在上述示例中,当鼠标悬停在父对象上时,父对象的背景色会过渡到绿色,子对象会放大1.5倍。当鼠标离开父对象时,动画效果会恢复到初始状态。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云