4

子または孫がホバリングされているときに親メニュー項目を強調表示する CSS のみの方法はありますか。

例えば。

<ul>
  <li><a href="link">Item 1</a>
    <ul>
      <li><a href="link">Item 1.1</a></li>
      <li><a href="link">Item 1.2</a></li>
      <li><a href="link">Item 1.3</a></li>
    </ul>
  </li>
</ul>

上記の例では、「アイテム 1.1」、「アイテム 1.2」、または「アイテム 1.3」にカーソルを合わせたときに、「アイテム 1」をスタイルでターゲットにできますか?

ありがとう。

4

1 に答える 1

7

要素に :hover を適用できます...子をホバリングすると、マウスが親の上にあることも意味します。

与えられた単純なケースでは。

li:hover{font-weight: bold;}

ホバーされていない子要素を制限したい

li:hover li{font-weight: normal}

ここで、ホバリングされた子を再ハイライトする必要があります。

li:hover li:hover{font-weight: bold;}

JSFiddle の例

于 2013-03-14T12:33:06.490 に答える