純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中文網其他相關文章！