更改一个div的不透明度，并将鼠标悬停在另一个div上

Question

我想在将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> 

Answer 1

在更改的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>