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

Question

This question already has answers here:
How to hover only the current li in nested ul?
(5 answers)
Closed 4 years ago.
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 :)