首页 文章

使用CSS级联<li> - 悬停效果[复制]

提问于
浏览 次
7

这个问题在这里已有答案：

我有一个简单的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
第1项 - >第1项
Group1 - > Group1，Item2，Group2，Item3，Item4
第2项 - >第2项
Group2 - > Group2，Item3，Item4
第3项 - >第3项
Item4 - > Item4

请参阅http://image-upload.de/image/r76d79/1c7af56a19.png，只是一个快速绘图 .

html css hover html-lists

5 回答

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

    回复于
  • 1

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

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

$('li').mouseout(function()
{
    $(this).removeClass('hover');
});
    回复于
  • 1

    您可以做的最好的事情是着色 ul ..

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

    像这样的东西http://jsfiddle.net/gaby/DxsDa/虽然它仍然会突出 group 1 文本..

    或者你可以使用无效的HTML，但我不建议明显的原因.. http://jsfiddle.net/gaby/DxsDa/1/

    回复于
  • 3

    使用UL元素的类或id（它是突出显示的li的父级）和直接子选择器：

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

    它将修复发生的错误，因为你试图突出显示每个li的元素:)

    回复于
  • -1

    Group 1 包含 Item 2 . 所以，当你徘徊 Item 2 时，你也在徘徊 Group 1 .

    因此，如果没有错误地格式化HTML，那么使用CSS无法实现 .

    有了JS，你可以到达那里 .
    如果这是可以接受的，请参阅@RobinJ's answer .

    回复于

相关问题