使用 CSS 级联 <li>-hover 效果

2022-01-22 00:00:00 hover html-lists html 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>

我想在鼠标悬停在 Item 或 Group 上时使用 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;
}

它对组 1"或项目 1"(不包含在组中)非常有效 - 当我将鼠标移到颜色变化上时.但是，如果我移过第 2 项"或第 3 项"，第 1 组"也仍然突出显示(红色背景).在这种情况下，我只想突出显示Item 2"或Item 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".

有人知道怎么做吗?

感谢您的帮助！

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

=============================== 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 -> 年年
项目 1 -> 项目 1
Group1 -> Group1, Item2, Group2, Item3, Item4
项目 2 -> 项目 2
Group2 -> Group2, Item3, Item4
项目 3 -> 项目 3
第 4 项 -> 第 4 项

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/

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

相关文章