Question

我在这里有一个小提琴http://jsfiddle.net/13v2fcjf/ 它有一个带有列表和子列表的基本html文档

<ul>
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ul>
    </li>
</ul>

我正在使用以下css -

li:hover {
    background: #f7f7f7;
}

当我将鼠标悬停在带有子项目的项目上时，所有子项目也会突出显示。这是不可取的。我只想要突出显示用户悬停的列表项。我怎样才能做到这一点？

另外，我尝试使用:not选择器，但它不起作用。

Answer 1

我认为您只需要在嵌套background标记上设置<ul>即可。像这样：

li:hover > ul {
    background: #fff;
}

编辑：这假设您只希望突出显示父<li>，而@ j08691在评论中指出，可能不完全是您所追求的。如果您希望突出显示每个<li>，则可能需要稍微修改您的HTML以使其更容易：

<ul>
    <li><a>Item 1</a>
        <ul>
            <li><a>Sub Item 1</a></li>
            <li><a>Sub Item 2</a></li>
            <li><a>Sub Item 3</a></li>
        </ul>
    </li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a>
        <ul>
            <li><a>Child 1</a></li>
            <li><a>Child 2</a></li>
            <li><a>Child 3</a></li>
        </ul>
    </li>
</ul>

通过将项目和子项目包装在另一个标记中 - 此处我只是为了参数而使用了<a>标记 - 您可以将该标记定位在:hover上突出显示没有嵌套标签的影响方式与原始代码相同：

a {
    display: inline-block;
    padding: 4px;
}
a:hover {
    background: #f7f7f7;
    cursor: pointer;
}

请参阅http://jsfiddle.net/13v2fcjf/3/

Answer 2

如果Ian的选项对您不起作用，第二个选项是将<li>内容包装在一个范围内并将悬停应用于该范围，如this example fiddle：

HTML：

<ul>
    <li><span>Item 1</span>
        <ul>
            <li><span>Sub Item 1</span></li>
            <li><span>Sub Item 2</span></li>
            <li><span>Sub Item 3</span></li>
        </ul>
    </li>
    ....

CSS

li span:hover {
    background: #f7f7f7;
    cursor: pointer;
}

HTH， -Ted

Answer 3

这种效果很自然，因为子项位于主要项目内。

我想到了两个选项：

1。）使用

重置子列表的背景颜色

li:hover > ul {
  background-color: white;
}

2。）使用li项作为容器：

<li><span class="highlighted">Item</span></li>

.highlighted:hover {
  background-color: red;
}

Answer 4

这是一个挑战，但以下CSS适用于您现有的标记。它仅突出显示悬停的li，而不突出显示其父级。

主要技巧是在将鼠标悬停在嵌套li上时让CSS创建新内容。您可以使用:before伪元素执行此操作：

li li:hover:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  z-index: -1;
  background: white;
}

（如果您仅定位CSS3浏览器，则可以使用::before代替:before。）

这会导致嵌套li覆盖其父li。负z-index可以防止背景覆盖任何文本。

家长li需要与z-index相对定位，并且嵌套li需要静态定位才能实现此目的：

li {
  position: relative;
  z-index: 0;
}

li li {
  position: static;
}

其他帖子中提到了另一个技巧：

li:hover ul {
  background: white;
}

完整的CSS：

li {
  line-height: 1.65em;
  cursor: pointer;
}

li {
  position: relative;
  z-index: 0;
}

li li {
  position: static;
}

li:hover {
  background: #def;
}

li:hover ul {
  background: white;
}

li li:hover:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  z-index: -1;
  background: white;
}

<强> Working fiddle

CSS List Hover SubItems

4 个答案: