将鼠标悬停在另一个 div 上时使用过渡更改一个 div 的不透明度

Question

当我将鼠标悬停在另一个 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>