使用 CSS 级联 <li>-hover 效果 [重复]

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 组”也会保持突出显示（红色背景）。在这种情况下，我只想突出显示“Item 2”或“Item 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 -> 年年
项目 1 -> 项目 1
Group1 -> Group1, Item2, Group2, Item3, Item4
项目 2 -> 项目 2
Group2 -> Group2, Item3, Item4
项目 3 -> 项目 3
第 4 项 -> 第 4 项

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

Answer 1

这个解决方案不是纯粹的 HTML/CSS 解决方案，但它确实有效。它使用 Javascript 库 jQuery。
http://jsfiddle.net/XP3Vp/

将其放在页面的头部：

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

如果您不希望在将光标移到Group 1 上时也突出显示基础列表项，请使用此选项：http://jsfiddle.net/CwhhN/

Answer 2

您能做的最好的事情就是为ul 着色..

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

类似 http://jsfiddle.net/gaby/DxsDa/ 的东西，虽然它仍然会突出显示 group 1 文本..

---

您也可以使用无效的 html，但出于明显的原因，我不建议这样做。http://jsfiddle.net/gaby/DxsDa/1/

Answer 3

Group 1 包含Item 2。所以，当你悬停Item 2 时，你也悬停在Group 1。

因此，如果不故意错误格式化 HTML，使用 CSS 就不可能实现您想要的。

不过，有了 JS，你就可以到达那里。
如果可以接受，请参考@RobinJ's answer。

Answer 4

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

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

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

Answer 5

对 UL 元素（突出显示的 li 的父元素）使用 class 或 id 并直接使用子选择器：

ul#your_id > li:hover{ background-color: #f00; }

它将修复由于您尝试突出显示每个 li 的元素而发生的错误:)