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

添加transition div 上发生变化的属性:

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