以前面临鼠标移入一级菜单显示下拉菜单，移开则隐藏，需要淡入、延迟淡出效果，仅使用CSS无法实现。JS与jQuery能通过设置定时器和fade效果达成目的。然而，纯CSS实现这一效果，主要依赖:hover伪类、后代选择器、opacity、transition、visibility以及animation与pointer-events。实现步骤如下：初始下拉菜单visibility为...
纯css实现下拉菜单淡入+延迟淡出效果
以前面临鼠标移入一级菜单显示下拉菜单，移开则隐藏，需要淡入、延迟淡出效果，仅使用CSS无法实现。JS与jQuery能通过设置定时器和fade效果达成目的。然而，纯CSS实现这一效果，主要依赖:hover伪类、后代选择器、opacity、transition、visibility以及animation与pointer-events。
实现步骤如下：初始下拉菜单visibility为hidden，opacity为0。鼠标移入时，visibility变为visible，opacity变为1，实现淡入。同时添加transition，让opacity持续0.3s，完成淡入效果。初始状态下拉菜单的transition，让opacity与visibility持续0.3s，实现淡出效果。通过给初始状态的下拉菜单添加transition的opacity延迟0.3s，同时将visibility的持续时间改为0.6s，实现延迟淡出。
为解决在淡出期间禁止取消淡出的问题，通过将pointer-events设置为none，让鼠标事件不触发。然而，transition不能直接作用于pointer-events，因此引入animation。为初始状态的下拉菜单添加animation，持续0.6s，通过定义两个分别占50%时间的关键帧，实现pointer-events从auto到none的转换，达到禁止取消淡出的效果。
完整示例代码已提供，包括针对不同场景的多种效果实现。同时，通过引入aa-前缀作为命名空间，利用CSS变量和calc函数对代码进行封装，实现代码的可复用性与定制性。这一技术使得在不同项目中快速应用相同效果成为可能，提高开发效率。2024-10-25
纯css行内实现点击实现图片的淡入淡出 
