Cascading <li>-hover effect using CSS

html css hover html-lists

51,419

Solution 1

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');
});

Solution 2

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/

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

Solution 4

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/

View more solutions

51,419

Author by

raisyn

Master's Student at Vienna University of Technology Interested in various topics of computer science.

Updated on July 18, 2022

Comments

raisyn almost 2 years
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.
wutz over 12 years

This type of thing will become easier with the new subject selectors that were announced for CSS4 :) @ul li li:hover { ... } should then style the ul w3.org/TR/2011/WD-selectors4-20110929/#subject
ANeves over 12 years

-1: wrong. OP wants item2 to highlight when it is hovered, and your rule breaks that.
raisyn over 12 years

yes, exactly like the first option you posted (but it will still highlight the group 1 text). Invalid html is no option.
raisyn over 12 years

I'm not very familiar with jquery yet, but I'm working on it. Nice solution. Is it possible to make it able to work with nested groups?
ValeriiVasin over 12 years

I just gave him a direction! His html is incorrect. It isn't good to use element without wrapper - like a Group. Decision is to improve html, not use some javascript spikes!
RobinJ over 12 years

@youllknow Yes, it does. Wasn't that the whole point? :p
raisyn over 12 years

I'm sorry, but it does not. I just checked both links again. Please read my edit in the question once again. If it's not clear I make a fast pic image to show you what I mean.
RobinJ over 12 years

@youllknow I'm sorry, I've been looking for a cleaner way to do it, but it didn't work out. Clumsy, but it works.jsfiddle.net/qpBgR There is a cleaner way to do it but it would involve loading yet another javascript library (a jQuery plugiin to be precise).
raisyn over 12 years

Solution works (when removing the else in the third line ;)! Thank you! Can you please provide the Link for the "cleaner way" or the name of the jquery plugin?
RobinJ over 12 years

I've gotten a bit further. This does load an additional jQuery plugin. jsfiddle.net/DZ4LT Problem is that it sill highlights Group 1 when hovering Item 3
raisyn over 12 years

Okay, I get by with your first solution! Thank you very much!
RobinJ over 12 years

No problem. I haven't got that much experience with jQuery yet, so I've got to experiment quite a lot sometimes to achieve my goal :p If this answer worked, how about an accept? (Sorry if this sounds intrusive but a lot of people seam to leave their questions with a good answer, but without accepting it)