DEV Community
·
CSS：使用 not() 选择所有兄弟元素
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
UX团队希望创建一个导航菜单，当鼠标悬停时，其他项目变暗。通过使用CSS的not()伪类实现，设置透明度动画过渡，降低非悬停元素的透明度，并通过visibility属性确保效果正常。
🎯
关键要点
-
UX团队希望创建一个导航菜单，鼠标悬停时其他项目变暗。
-
使用CSS的not()伪类实现该效果。
-
HTML结构包含多个菜单项。
-
SCSS代码中设置了透明度动画过渡。
-
通过not()伪类降低非悬停元素的透明度。
-
设置.menu-items容器的可见性为隐藏，子元素可见，以确保效果正常。
❓
延伸问答
如何使用CSS的not()伪类来实现导航菜单的效果？
通过使用not()伪类，可以将非悬停元素的透明度降低，从而实现导航菜单的其他项目变暗效果。
在创建导航菜单时，如何处理元素的可见性？
将.menu-items容器的可见性设置为隐藏，然后将子元素的可见性设置为可见，以确保效果正常。
如何为导航菜单中的元素添加透明度动画过渡？
在SCSS中，可以为.menu-items的子元素添加transition属性，设置opacity的过渡效果。
这个导航菜单的设计目的是什么？
设计的目的是在鼠标悬停时，使其他菜单项变暗，以突出显示当前悬停的项。
在SCSS代码中，如何选择所有子元素？
可以使用& > *选择器来选择.menu-items容器中的所有子元素。
使用not()伪类时，如何处理悬停效果？
在悬停时，通过:not(:hover)选择器将非悬停元素的透明度设置为较低值，从而实现变暗效果。
➡️
