延迟儿童悬停效果 div

Question

在附加的代码段中，当您将鼠标悬停在父项 div 上时，会显示子项 div。正如预期的那样，如果您移除光标，它就会消失。

是否可以通过某种方式将这种消失延迟 1 秒？

ul {
  background: red;
  width: 100px;
}

div {
  display: none;
}

ul:hover div {
  display: block;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>

Answer 1

您可以在没有 CSS 动画的情况下设置过渡速度和延迟。 transition-delay 效果不适用于悬停时的 display 属性。它最适用于 opacity: 0; → opacity: 1; 或 visibility: hidden; → visibility: visible; 查看我对你的 CSS.

所做的更改

ul {
  width: 100px;
  list-style-type: none;
}

li {
  background: red;
}

div {
  opacity: 0;
  transition: all .4s ease 3s;

}

ul:hover > div {
  background: red;
  opacity: 1;
  transition: .4s;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>

编辑： 删除了过渡延迟，并为起始不透明度为 0 的 ul 和 div 添加了过渡。您可以延迟通过添加 ease 3s 或您希望 div 延迟多长时间来实现鼠标移开效果，当您离开鼠标时恢复为 opacity: 0;。

Answer 2

您可以使用transition:all .2s ease 2s;属性来延迟消失。

ul {
  width: 100px;
  list-style-type: none;
}

li {
  background: red;
}

div {
  opacity: 0;
  transition: all .2s ease 2s;
}

ul:hover>div {
  background: red;
  opacity: 1;
  transition: .4s;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>

延迟儿童悬停效果 div

Delay hover effect for child div

html

css

css-animations