CSS は、別の要素のホバー状態に基づいて兄弟要素のスタイルに影響を与えることができますか?

CSS ホバーによる兄弟の操作

Web デザインでは、要素の兄弟の外観を以下に基づいて変更したいシナリオに遭遇することがあります。そのホバリング状態。ただし、CSS のこの機能には制限があります。

マウスオーバー時の兄弟の色の変更

隣接する要素があり、後続の兄弟の色を変更したい場合最初の要素 (通常は兄弟の前に配置されます) がホバーされている場合、CSS を使用して可能です。たとえば、その上の「h1」見出しにカーソルを置いたときに、「a」リンクの色を変更できます。

h1 + a {
  color: #a04f4f;
}
h1:hover + a {
  color: #4f4fd0;
}

制限事項

ただし、前の兄弟の色に同じように影響を与えることはできません。 「h1」見出しの後に「a」リンクがあり、リンク上にカーソルを置いたときに見出しの色を変更したい場合、CSS では実現できません。

a:hover + h1 {
  background-color: #444;  // This won't work
}

CSS 兄弟相互作用例

これは、この中で可能な CSS インタラクションと不可能な CSS インタラクションを示す例です。コンテキスト:

<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>

h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}

以上がCSS は、別の要素のホバー状態に基づいて兄弟要素のスタイルに影響を与えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。