使用CSS的级联< li> - 霍夫效果 [英] Cascading <li>-hover effect using CSS

问题描述

我有一个简单的html无序列表。

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>

我想使用CSS在鼠标悬停在一个项目或组上时产生一个简单的效果。

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

它对于Group 1或Item 1包含在组中） - 当我将鼠标移动到颜色更改时。但如果我移过项目2或项目3组1也保持hightlighted（红色背景）。在这种情况下，我只想突出显示项目2或项目3。

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?

感谢您的帮助！

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

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

鼠标悬停xxx应突出显示yyy

xxx - > yyy

Item1 - > Item1

Group1 - > Group1，Item2，Group2，Item3，Item4

Item2 - > Item2

Group2 - > Group2，Item3 ，Item4

Item3 - > Item3

Item4 - > Item4

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

请参阅http://image-upload.de/image/r76d79/1c7af56a19.png ，只是一个快速绘图。

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

推荐答案

在jQuery文档中找到可能是最好的解决方案。
http://api.jquery.com/event.stopPropagation/ p>

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

这篇关于使用CSS的级联< li> - 霍夫效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！