CSS 调整实现悬停1秒淡入、移出即时消失的过渡效果

原代码的核心偏差原因：将1s过渡规则写在元素默认类中，导致元素无论状态如何切换，只要透明度发生变化都会触发1s时长的过渡，因此鼠标移出时元素会缓慢淡出，不符合预期。
调整思路：将1s的过渡规则从元素默认态移至悬停触发状态下，通过CSS选择器的匹配生效时机，分别匹配两种场景的过渡要求：

• 非悬停状态下，元素无过渡约束，透明度切换为0时即刻消失
• 悬停状态下，元素加载1s过渡规则，实现透明度从0到1的平滑淡入
  调整后的完整CSS代码：

.invisible {
  opacity: 0;
}

div {
  cursor: pointer;
}

div:hover .invisible {
  opacity: 1;
  /* 仅悬停状态加载1s过渡，约束淡入过程 */
  transition: opacity 1s ease;
}

实际效果校验：

• 鼠标移入绑定区域时，元素匹配悬停选择器规则，透明度从0向1变化的过程受1s过渡约束，完成1秒平滑淡入
• 鼠标移出绑定区域时，元素回归默认样式，无过渡规则约束，透明度直接切为0，即刻消失无延迟

优化提示：原代码中设置opacity: 100%的写法非CSS规范取值，opacity的合法取值范围为0~1的数值，调整为1后规范性与兼容性更优。如果需要更强的跨浏览器兼容性保障，可以在.invisible类中显式补充默认过渡规则transition: opacity 0s;，明确非悬停状态下无过渡效果，避免不同浏览器的默认渲染差异。

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