如何在 CSS 中延长悬停时间答案

【问题标题】：How to prolong hover lasting time in CSS如何在 CSS 中延长悬停时间
【发布时间】：2017-10-20 17:15:55
【问题描述】：

a:hover + #menu {
display: block;
position: fixed;

}

这是我悬停的css，它应该显示一个菜单。但是当我取下鼠标时它会立即消失，我可以在这里做什么？通过 JS 做这件事会更好吗？我该怎么做？

这是此菜单的 div。它是 td 的一部分，它是主表的一部分，主表是网站的主要部分

<div id="menu">
   <button><a href="#igradesno1">COD WW2</button>
   <button><a href="#igra2levo">Destiny 2</button>
   <button><a href="#wolfensteindesno">Wolfenstein</button>
   <button><a href="#forhonor1">For Honor</button>
   <button><a href="#fifa182">Fifa 18</button>



 </div>

【问题讨论】：

当用户将鼠标从菜单项上移开时，悬停停留一段时间是您想要的行为吗？
是的，这就是我们想要的行为

标签： javascript html css menu hover

【解决方案1】：

尝试使用不透明度和 CSS 过渡，而不是使用 display: block 和 none。

我创建了一个简单的 JSfiddle 来演示

https://jsfiddle.net/3q0v5ufh/

【讨论】：