Pure CSS を使用して子要素の上にマウスを置いたときに、親要素のホバー効果をオフにする方法

子がホバーしたときに親のホバーがオフになる: 純粋な CSS アプローチ

HTML 構造には、2 つのネストされた

があります。要素: 外部コンテナとしての .parent と内部要素としての .child。デフォルトでは、マウス カーソルを .parent の上に置くと、その背景色が水色に変わります。ただし、私たちの目標は、カーソルを .child の上に置いたときに .parent の背景を元の灰色に戻すことです。

残念ながら、CSS セレクターには現在、子の状態に基づいて親要素のスタイルを設定する機能がありません。この制限を回避するために、追加の兄弟要素を使用する賢いテクニックを採用します。

CSS では、寸法とパディング、および灰色の背景を持つ .parent 要素を定義します。 .parent の上にマウスを置くと、その背景が水色に変わります。

重要な部分は .child 要素です。負のマージン (上: -200px;) を使用して親の上に距離を置いて配置し、ホバーすると黒に変化する濃い灰色の背景を与えます。

最後に、.sibling 要素を紹介します。これはプレースホルダー要素で、 .child に一致するように位置とサイズが設定されていますが、その少し左上に配置されています。また、ホバーすると白に変化する色付きの背景もあります。

マウス カーソルを .child の上に置くと、.child 要素の背景色が黒に変化します。同時に、これにより .sibling 要素が重なり、以前にマウスオーバーされていた .parent の部分が覆われます。 .sibling は透明なので、.parent の元の灰色の背景が再び表示されます。

その結果、.child の上にマウスを置くと、黒くなり、以前に強調表示されていた .parent の部分が非表示になります。これにより、実際には .sibling の後ろがまだ灰色であるにもかかわらず、.parent の背景が元の色に戻ったかのような錯覚が生じます。

この状況における純粋な CSS の制限にもかかわらず、このテクニックはエレガントでエレガントな CSS を提供します。子要素の上にマウスを移動したときに、親要素のホバー効果をオフにする効果的な解決策です。

以上がPure CSS を使用して子要素の上にマウスを置いたときに、親要素のホバー効果をオフにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html define using finally default this position padding background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。