使用CSS级联<li> - 悬停效果

Question

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

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

当鼠标在Item或Group上时,我想使用CSS来产​​生一个简单的效果.

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

它适用于"组1"或"项目1"(不包含在组中) - 当我将鼠标移动到颜色变化上时.但是,如果我移动"第2项"或"第3项","第1组"也会保持高亮显示(红色背景).在这种情况下,我只想强调"第2项"或"第3项".

有谁知道如何做到这一点？

谢谢你的帮助!

===============================编辑

<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

请参阅http://image-upload.de/image/r76d79/1c7af56a19.png,这是一张快速图纸.

Answer 1

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

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

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