悬停与移出悬停时的过渡效果异常问题求助

嘿，这个问题我之前也踩过坑！核心原因是你只用了visibility属性控制菜单的显示隐藏——虽然visibility支持过渡，但它的变化是二元触发的（要么完全可见，要么完全不可见），没法产生视觉上的平滑渐变效果。咱们可以结合opacity和visibility来搞定，让菜单的显示和消失都有流畅过渡：

修改后的CSS代码 #

.active-box .dropup-content {
  visibility: hidden;
  opacity: 0; /* 添加透明度初始值为0，用于实现淡入淡出 */
  position: absolute;
  color: rgb(59, 151, 74);
  border-radius: 3px;
  width: 700px;
  bottom: 5em;
  height: 250px;
  z-index: 3;
  margin: 0;
  background-color: rgb(66, 67, 66);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* 明确指定过渡属性，让opacity和visibility都跟随时长变化 */
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
  pointer-events: none; /* 不可见时禁止鼠标交互，避免干扰hover触发逻辑 */
}

.dropup:hover .dropup-content {
  visibility: visible;
  opacity: 1; /* 透明度拉满，实现平滑淡入 */
  cursor: pointer;
  pointer-events: auto; /* 可见时恢复鼠标交互，保证菜单可点击 */
}

关键修改点说明 #

• 新增opacity属性：这是实现视觉平滑过渡的核心，通过透明度的渐变来模拟菜单的显示/消失
• 调整transition规则：明确指定要过渡的属性，确保opacity和visibility都能按照设定的时长完成变化
• 添加pointer-events：避免菜单在透明状态下（还没完全消失时）触发鼠标事件，防止hover状态出现异常跳转

这样修改后，当鼠标移出时，菜单会先慢慢变透明，再彻底隐藏，完美实现平滑的消失过渡啦！

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