純粋なCSSギャラリーフォーカス効果：not

以前は、ホバリングされたものを除き、コンテナ内のすべての要素をスタイリングすることがよくあります。 これは通常、イベントとmouseenterおよびmouseleaveのクラスを追加または削除することを意味しました。機能的ですが、純粋なCSSソリューションが望ましいことがよくあります。 この記事では、Netflixのホームページなどのアニメーションの再現に使用される技術に最初に触発されたCSSのみのアプローチについて詳しく説明しています。 ただし、このメソッドを使用した以前の試みは、要素間のギャップのためにグリッドベースのレイアウトで失敗しました。 この記事では、これらのギャップをエレガントに処理するソリューションを紹介します。

マークアップとベースCSS

基礎HTMLは、グリッドベースのリストを使用します：

• ：コンテナグリッド。.grid
• ：個々のグリッド項目。.grid__child

マークアップは次のとおりです

最初のCSSはグリッドとその子供のスタイルをスタイルします：

これにより、アイテム間のギャップがある3列のグリッド（画面サイズに基づいて動的に調整）が作成されます。 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;
}

コアインタラクションには、2つのステップが含まれます

コンテナのホバリングはすべての子供に影響します

ホバリングされた子供自体は除外されます。

1. 最初に、容器がホバリングされているときにすべての子供をターゲットにします：
次に、不透明度を減らすために現在ホバリングされている子供を使用して除外します：

これは、要素間のギャップなしで完全に機能します。 ただし、ギャップを使用すると、カーソルがギャップ自体を超えている場合でも効果がトリガーされます。

.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ギャラリーフォーカス効果：notの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。