4

Is there a CSS only method of highlighting a parent menu item when I child, or grandchild is hovered.

EG.

<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>

So in the example above can I target "Item 1" with a style when "Item 1.1", "Item 1.2" or "Item 1.3" are hovered over?

Thanks.

Strontium_99
  • 1,771
  • 6
  • 31
  • 52
  • It does not appear so. See this http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child – suspectus Mar 14 '13 at 12:45
  • 1
    FWIW CSS Selectors Level 4 will include a subject selector which allows you to change _which_ element in the selector gets styled, so you could do `li! > a {this will style any li that has an a as a direct child}`. Edit: http://dev.w3.org/csswg/selectors4/#subject – powerbuoy Mar 14 '13 at 13:08

1 Answers1

8

you can apply :hover to the elements... hovering a child will also imply the mouse being 'over' the parent.

In the simple case given.

li:hover{font-weight: bold;}

Now you want to restrict the child elements not being hovered over

li:hover li{font-weight: normal}

Now you need to re-highlight hovered children.

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

JSFiddle example

Ian Wood
  • 6,515
  • 5
  • 34
  • 73