纯CSS画廊的重点效果：不

以前，除了悬停的javaScript外，在容器中造型所有元素。 这通常意味着添加或删除在

和mouseenter>事件上的类。虽然功能性，但纯CSS解决方案通常是可取的。 本文详细介绍了一种仅使用CSS的方法，最初是受到重现Netflix主页等动画的技术的启发。 但是，由于元素之间的差距，先前使用此方法的尝试在基于网格的布局上失败。 本文提出了一种优雅处理这些差距的解决方案。 mouseleave标记和基本CSS

基础HTML利用基于网格的列表：>

：容器网格。

• .grid：单个网格项目。
• .grid__child标记如下：

最初的CSS样式网格及其孩子：

这将创建一个三柱网格（根据屏幕尺寸动态调整），并且在项目之间存在差距。

利用CSS选择器

.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;
}

核心相互作用涉及两个步骤：

悬停容器都会影响所有儿童。

悬停的孩子本身被排除在外。

1. 首先，当容器悬停时，我们针对所有儿童：
2. 接下来，我们将使用
降低不透明度的当前盘旋儿童排除

>这在元素之间没有差距。 但是，由于差距，即使光标本身在差距上，效果也会触发。

解决差距

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

解决方案在于控制指针事件。 通过在:not(:hover)>容器上设置

>在其子女上，我们确保只有直接在子元素上方触发悬停效应，从而有效地忽略了差距。

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

添加一个更平滑的不透明度变化的过渡完成了效果。>

最终结合此解决方案的CSS是：

潜在的局限性pointer-events: none .grid>有效，这种方法可能需要调整可滚动容器（例如水平滑块）。 在这种情况下，将pointer-events: auto包装在另一个容器中可以是解决方法。

>

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

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

结论

这为共同的互动挑战展示了强大的纯CSS解决方案。 通过利用高级CSS选择器和指针事件控制，我们在不诉诸JavaScript的情况下实现了复杂的效果，从而导致更清洁，更可维护的代码。 这突出了CSS的越来越多的功能，并鼓励在添加JavaScript复杂性之前探索本地解决方案。

以上是纯CSS画廊的重点效果：不的详细内容。更多信息请关注PHP中文网其他相关文章！