子div的延迟悬停效果答案

【问题标题】：Delay hover effect for child div子div的延迟悬停效果
【发布时间】：2022-04-08 23:59:43
【问题描述】：

在附加的 sn-p 中，当您将鼠标悬停在父 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>

【问题讨论】：

标签： html css css-animations

【解决方案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>

编辑： 移除了过渡延迟，并为 ul 和 div 添加了过渡，它们的起始不透明度为 0。您可以通过添加 @987654331 来延迟鼠标移出效果@ 或者您希望 div 在鼠标移开时延迟恢复到 opacity: 0; 的时间。

【讨论】：

嘿，Kameron，你添加了悬停延迟，我相信 OP 要求延迟鼠标关闭。
没错，还是感谢您的意见
@Smithy 已更正，请参阅编辑。
谢谢，这看起来不错，但是即使我将鼠标悬停在隐藏元素本身上，元素也会显示出来......不幸的是，它不适用于组合显示属性。也许我会研究一下 JS 解决方案...
@Smithy 不幸的是，这是因为延迟不适用于使用显示属性，并且只有仍在页面上但隐藏的元素（opacity，visibility）样式有效最好的。因此，导致您将鼠标悬停在隐藏属性上以使其显示。

【解决方案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>

【讨论】：