CSS：使用 not() 选择所有兄弟姐妹

我们的用户体验团队希望我创建一个导航菜单，使其余项目变暗，而不是突出显示悬停的项目。

CSS 来救援！

使用 CSS not() 伪类时，解决方案非常简单：

超文本标记语言

<div class="menu-items">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Services</div>
  <div>Blog</div>
  <div>Portfolio</div>
</div>

南海社会保障局

我删除了样式属性，以便我们可以专注于实际功能：

1 .menu-items {    
2     visibility: hidden;
3 
4     & > * {
5         visibility: visible;
6         transition: opacity 500ms;
7     }
8 
9     &:hover > :not(:hover) {
10        opacity: 0.45;
11    }
12 }

我们有一个带有 .menu-items 类的容器。
在第 4 行中，我们选择其所有子元素并向它们添加不透明动画过渡。

第 9 行通过使用 not() 伪类将所有 非悬停 元素的不透明度设置为较低值来处理元素上的悬停效果。

可见性属性是怎么回事？
我们将 .menu-items 容器的可见性设置为隐藏，然后将子元素设置回可见。当我们将鼠标悬停在元素之间时，这会导致效果关闭。

就是这样:)

以上是CSS：使用 not() 选择所有兄弟姐妹的详细内容。更多信息请关注PHP中文网其他相关文章！