我想在将div悬停在另一个div上时缓慢地更改div的不透明度。
将鼠标悬停在另一个div上时，可以更改div的不透明度，但是问题是我不知道如何缓慢地进行过渡。
我的代码如下所示：
#my-id:hover ~ #info .hc {
display: block;
opacity: 1;
}
#info div {
display: none;
opacity: 0;
}
.test-border {
border: 1px solid red;
width: 100%;
height: 100%;
color: red;
}<div>
<div id="my-id">Hover here</div>
<div id="info">
<div class="hc test-border">Information</div>
</div>
</div>在更改的div上添加transition属性：
#info div {
transition:opacity 1s ease;
opacity: 0;
}
这里的问题是您可能需要删除，display:none因为此属性无法通过过渡设置动画。
#my-id:hover ~ #info .hc {
opacity: 1;
}
#info div {
opacity: 0;
transition:opacity 1s ease;
}
.test-border {
border: 1px solid red;
width: 100%;
height: 100%;
color: red;
}<div>
<div id="my-id">Hover here</div>
<div id="info">
<div class="hc test-border">Information</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句