Cascading <li>-hover effect using CSS [duplicate]

Question

This question already has an answer here:

• How to hover only the current li in nested ul? 4 answers

I have got an simple html unordered list.

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

I want to use CSS to make a simple effect when the mouse is over an Item or a Group.

li:hover
{
    background-color:#ff0000;
}

It works quite fine for "Group 1" or "Item 1" (not contained in a group) - When I'm moving the mouse over the color changes. But if I move over "Item 2" or "Item 3" "Group 1" also remains hightlighted (red background). In this case I only want to highlight "Item 2" or "Item 3".

Has anyone an idea how to do this?

Thanks for your help!

=============================== EDIT

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Group 2
                <ul>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Mouse Over xxx should highlight yyy
xxx -> yyy
Item1 -> Item1
Group1 -> Group1, Item2, Group2, Item3, Item4
Item2 -> Item2
Group2 -> Group2, Item3, Item4
Item3 -> Item3
Item4 -> Item4

Please see http://image-upload.de/image/r76d79/1c7af56a19.png ,just a quick drawing.

Answer 1

This solution isn't a purely HTML/CSS one, but it works. It uses the Javascript library jQuery.
http://jsfiddle.net/XP3Vp/

Put this in the head-section of your page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$('li').mouseover(function()
  {
          if ($('li ul li:hover').length) 
          {
              $('li ul li:hover').css('background','red'); 
          }
          else
          {
               $('li:hover').css('background','red'); 
          }
  });
$('li').mouseout(function()
  {
          $(this).css('background', 'transparent');
  });
</script>

Use this if you don't want the underlying list items to be highlighted as well when moving the cursor over Group 1: http://jsfiddle.net/CwhhN/

Answer 2

The best you can do is to colorize the ul as well ..

ul{background-color:#fff;}
li:hover
{
    background-color:#ff0000;
}

something like this http://jsfiddle.net/gaby/DxsDa/ although it will still highlight the group 1 text..

---

Alternatively you can resort to invalid html but i would not suggest that for obvious reasons.. http://jsfiddle.net/gaby/DxsDa/1/

Answer 3

Group 1 contains Item 2. So, when you are hovering Item 2 you are also hovering Group 1.

Thus, with CSS what you want is not possible without mis-formatting HTML on purpose.

With JS you can get there, though.
If this is acceptable, refer to @RobinJ's answer.

Answer 4

Found probably the best solution at the jQuery documentation. http://api.jquery.com/event.stopPropagation/

$('li').mouseover(function(e)
{
    e.stopPropagation();
    $(this).addClass('hover');
});

$('li').mouseout(function()
{
    $(this).removeClass('hover');
});

Answer 5

Use class or id for UL element (which is parent for highlighted li's) and directly children selector:

ul#your_id > li:hover{ background-color: #f00; }

It will fix error which happens because you try to highlight every li's elements :)