在悬停在另一个div上时，更改一个div的不透明度和转换

Question

当我将鼠标悬停在另一个div上时，我试图缓慢改变div的不透明度。

当我将鼠标悬停在另一个div上时，我可以改变div的不透明度，但问题是我不知道如何通过过渡缓慢地做。

我的代码如下所示：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<div>
  <div id="my-id">Hover here</div>
  <div id="info">
    <div class="hc test-border">Information</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

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>