DEV Community
·
CSS：使用 not() 选择所有兄弟元素
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
UX团队希望创建一个导航菜单，当鼠标悬停时，其他项目变暗。通过使用CSS的not()伪类实现，设置透明度动画过渡，降低非悬停元素的透明度，并通过visibility属性确保效果正常。
🎯
关键要点
- UX团队希望创建一个导航菜单，鼠标悬停时其他项目变暗。
- 使用CSS的not()伪类实现该效果。
- HTML结构包含多个菜单项。
- SCSS代码中设置了透明度动画过渡。
- 通过not()伪类降低非悬停元素的透明度。
- 设置.menu-items容器的可见性为隐藏，子元素可见，以确保效果正常。
➡️
