Html 使用 CSS 的级联 <li>-hover 效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8016791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cascading <li>-hover effect using CSS
提问by raisyn
I have got an simple html unordered list.
我有一个简单的 html 无序列表。
<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.
当鼠标悬停在 Item 或 Group 上时，我想使用 CSS 来制作一个简单的效果。
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".
它适用于“组 1”或“项目 1”（不包含在组中） - 当我将鼠标移到颜色变化上时。但是，如果我移过“项目 2”或“项目 3”，“第 1 组”也会保持高亮显示（红色背景）。在这种情况下，我只想突出显示“项目 2”或“项目 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
鼠标悬停 xxx 应该突出显示 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.
请参阅http://image-upload.de/image/r76d79/1c7af56a19.png，只是一个快速绘图。
采纳答案by raisyn
Found probably the best solution at the jQuery documentation. http://api.jquery.com/event.stopPropagation/
在 jQuery 文档中找到了可能是最好的解决方案。 http://api.jquery.com/event.stopPropagation/
$('li').mouseover(function(e)
{
e.stopPropagation();
$(this).addClass('hover');
});
$('li').mouseout(function()
{
$(this).removeClass('hover');
});
回答by RobinJ
This solution isn't a purely HTML/CSS one, but it works. It uses the Javascript library jQuery.
http://jsfiddle.net/XP3Vp/
这个解决方案不是纯粹的 HTML/CSS 解决方案，但它有效。它使用 Javascript 库 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/
如果您不希望在将光标移到上方时也突出显示底层列表项，请使用此选项Group 1：http: //jsfiddle.net/CwhhN/
回答by ANeves
Group 1contains Item 2. So, when you are hovering Item 2you are also hovering Group 1.
Group 1包含Item 2. 所以，当你悬停时，Item 2你也在悬停Group 1。
Thus, with CSS what you want is not possible without mis-formatting HTML on purpose.
因此，如果不故意错误地格式化 HTML，则使用 CSS 是不可能的。
With JS you can get there, though.
If this is acceptable, refer to @RobinJ's answer.
不过，有了 JS，您就可以到达那里。
如果这是可以接受的，请参阅@RobinJ 的回答。
回答by Gabriele Petrioli
The best you can do is to colorize the ulas well ..
你能做的最好的事情就是给ul..
ul{background-color:#fff;}
li:hover
{
background-color:#ff0000;
}
something like this http://jsfiddle.net/gaby/DxsDa/although it will still highlight the group 1text..
像这样的http://jsfiddle.net/gaby/DxsDa/虽然它仍然会突出显示group 1文本..
Alternatively you can resort to invalid html but i would not suggest that for obvious reasons.. http://jsfiddle.net/gaby/DxsDa/1/
或者，您可以使用无效的 html，但出于明显的原因，我不建议这样做.. http://jsfiddle.net/gaby/DxsDa/1/
回答by ValeriiVasin
Use class or id for UL element (which is parent for highlighted li's) and directly children selector:
对 UL 元素（它是高亮 li 的父元素）使用 class 或 id 并直接使用子选择器：
ul#your_id > li:hover{ background-color: #f00; }
It will fix error which happens because you try to highlight every li's elements :)
它将修复由于您尝试突出显示每个 li 的元素而发生的错误:)
