一个纯 CSS 画廊焦点效果与 :not

由柏拉图重新发布

关注： 0

过去，我经常需要弄清楚如何为容器内的所有元素添加样式，但是不能悬停的那个。

对兄弟姐妹的预期“淡出”效果演示，让用户“专注”于特定元素。

此效果需要选择悬停元素的兄弟姐妹。我曾经为此应用 JavaScript，添加或删除定义正确 CSS 规则的类 mouseenter 和 mouseleave 事件，类似这样：

虽然代码可以解决问题，但我的直觉总是告诉我，必须有一些纯 CSS 方法才能达到相同的结果。几年前，在为我的公司开发某个滑块时，我想出了一个类似于 Chris Geelhoed 如何重现著名的 Netflix 主页动画我明白我不再需要 JavaScript 了。

几个月前，我试图在我的公司网站上对基于网格的提要实施相同的方法 - 繁荣 - 由于元素之间的差距，它没有工作！

对我来说幸运的是，它似乎不必保持这种状态，而且我再次不需要 JavaScript。

标记和基础 CSS

让我们通过准备适当的标记开始编码：

.grid 是基于网格的
清单
和 .grid__child 元素是

我们想与之互动的孩子。

标记如下所示：

样式应如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

此示例代码将创建三个列表项，在网格中占据三列。

CSS 选择器的威力

现在，让我们添加一些交互性。我最初应用的方法基于两个步骤：

悬停在容器上应该会改变里面所有元素的样式……
…除了那个光标现在悬停的那个。

让我们从光标悬停在容器上时抓住每个孩子开始：

.grid:hover .grid__child {
  /* ... */
}

其次，让我们排除当前悬停的项目并减少 opacity 任何其他孩子的：

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

这对于在子元素之间没有间隙的容器来说已经足够了：

鼠标光标与未被任何间隙分隔的元素交互的动画 GIF。 — 演示无间隙工作的解决方案。

但是，就我而言，我无法消除这些差距：

鼠标光标悬停在元素上的动画 GIF。但是，当鼠标进入两个元素之间的间隙时，效果会随着鼠标离开元素而结束。 — 引入间隙时遇到的问题演示。

当我在瓷砖之间移动鼠标时，所有的子元素都消失了。

无视缝隙

我们可以假设间隙是容器中未被其子项覆盖的部分。我们不想在每次光标进入容器时运行效果，而是在光标悬停在容器内的一个元素上时运行效果。那么我们可以忽略光标在间隙上方移动吗？

是的，我们可以，使用 pointer-events: none 在 .grid 容器并将它们带回来 pointer-events: auto 在它的孩子身上：

.grid {
  /* ... */
  pointer-events: none;
}

/* ... */

.grid__child {
  /* ... */
  pointer-events: auto;
}

让我们在不透明度上添加一些很酷的过渡，我们有一个现成的组件：

当我们添加更多图块并创建二维布局时，它可能会更酷：

最终的 CSS 如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

只需要额外的 2 行代码，我们就克服了差距问题！