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 - ＆gt; YYY
第1项 - ＆gt;项目1
Group1 - ＆gt; Group1，Item2，Group2，Item3，Item4
第2项 - ＆gt;项目2
Group2 - ＆gt; Group2，Item3，Item4
第3项 - ＆gt;项目3
Item4 - ＆gt;第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元素的类或id（它是突出显示的li的父元素）和直接子选择器：

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

它会修复因为你试图突出每个li的元素而发生的错误：）

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

5 个答案: