如何仅使用CSS实现鼠标悬停时div在5秒后自动消失

问题分析 #

你写的代码没有效果是因为display属于非可动画属性，无法被transition识别做平滑过渡，设置的5秒过渡规则会直接失效，鼠标悬停时元素会立刻消失，没有渐变过程。

正确实现方案 #

根据你要不要保留元素消失后的占位，有两种常用方案：

方案1：保留原有占位

仅让元素视觉上透明消失，原位置还会占住，适合需要布局不跳动的场景：

.a {
  display: block;
  /* 初始状态：完全可见，可响应鼠标交互 */
  opacity: 1;
  pointer-events: auto;
  /* 给透明度属性加5秒过渡动画 */
  transition: opacity 5s ease;
}
.a:hover {
  /* 悬停状态：完全透明，不再响应任何鼠标事件 */
  opacity: 0;
  pointer-events: none;
}

方案2：不保留原有占位

动画结束后元素完全不占文档流空间，布局会自动填充它原来的位置：

.a {
  display: block;
  opacity: 1;
  visibility: visible;
  height: 100px; /* 替换成你元素的实际高度，也可以用max-height适配动态高度 */
  transition: all 5s ease;
}
.a:hover {
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 0; /* 如果你的元素有内边距，需要一并设为0 */
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者ohwell