Question

假设一个ul有li个项目，其中有些又有ul个内部li个项目：

    <div class="nav-main">
        <ul>
            <li>First Level First Item</li>
            <li>First Level Second item
                <ul><li>Level 2 First item</li></ul>
            </li>    
            <li>Level 1 Second item</li>
        </ul>
    </div>
</body>

将鼠标悬停在外部列表的li项上将突出显示该项，但是将鼠标悬停在嵌套列表项上将使该项和包围的列表项悬停。

li:hover { border: 1px solid black; }

如何总是始终仅突出显示一项？最好不要使用任何JavaScript。

li:hover { border: 1px solid blue; }

        <div class="nav-main">
            <ul>
                <li>First Level First Item</li>
                <li>First Level Second item
                    <ul><li>Level 2 First item</li></ul>
                </li>    
                <li>Level 1 Second item</li>
            </ul>
        </div>

Answer 1

一种选择是在列表中的每个文本项周围添加一个<span>，然后可以将其用作CSS选择器：

li>span:hover { border: 1px solid blue; }

<div class="nav-main">
  <ul>
    <li><span>First Level First Item</span></li>
    <li><span>First Level Second item</span>
      <ul><li><span>Level 2 First item</span></li></ul>
    </li>    
    <li><span>Level 1 Second item</span></li>
  </ul>
</div>

Answer 2

我向您提出使用::before伪元素的以下解决方案：

始终使用position: relative个元素中的li和height: 1em;来调整伪元素（边界）的大小，
在hover个li中，显示边框/伪元素，
在hover个子ul中，添加白色边框以隐藏父li边框。

工作片段：

li {
  position: relative;
  margin-top: 5px; /* Added this to prevent some dead-zones triggering the ul:hover */
}

li::before, ul::before {
  content: '';
  display: none;
  position: absolute;
  height: 1em;
  top: -1px;
  left: -4px;
  right: 0;
  padding: 1px 0;
}

li:hover::before {
  display: block;
  border: 1px solid blue;
}

li ul:hover::before {
  display: block;
  border: 1px solid white;
}

<div class="nav-main">
  <ul>
    <li>First Level First Item</li>
    <li>First Level Second item
      <ul>
        <li>Level 2 First item</li>
      </ul>
    </li>
    <li>Level 1 Second item</li>
  </ul>
</div>

希望有帮助。

Answer 3

这是一个隐藏外部高光的技巧，因为我认为您不能禁用它，因为子元素的悬停总是会触发父元素的悬停：

li:hover {
  border: 1px solid blue;
}

.nav-main>ul>li {
  position: relative;
}

ul>li>ul>li:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  display:none;
  border: 1px solid #fff;
}

ul>li>ul>li:hover:before {
  display:block;
}

<div class="nav-main">
  <ul>
    <li>First Level First Item</li>
    <li>First Level Second item
      <ul>
        <li>Level 2 First item</li>
      </ul>
    </li>
    <li>Level 1 Second item</li>
  </ul>
</div>

这是另一个技巧，您可以用伪元素替换边框：

li {
  position: relative;
}

li span:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display:none;
  border: 1px solid blue;
}

li span:hover:before {
  display:block;
}

<div class="nav-main">
  <ul>
    <li><span>First Level First Item</span></li>
    <li><span>First Level Second item</span>
      <ul>
        <li><span>Level 2 First item</span></li>
      </ul>
    </li>
    <li><span>Level 1 Second item</span></li>
  </ul>
</div>

Answer 4

关闭

之前，嵌套一次只会高亮1

<div class="nav-main">
        <ul>
            <li>First Level First Item</li>
            <li>First Level Second item</li>
                <ul><li>Level 2 First item</li></ul>  
            <li>Level 1 Second item</li>
        </ul>
    </div>

<style type="text/css">li:hover { border: 1px solid blue; }</style>

<div class="nav-main">
  <ul>
    <li>First Level First Item</li>
    <li>First Level Second item</li>
      <ul><li>Level 2 First item</li></ul>   
    <li>Level 1 Second item</li>
  </ul>
</div>

仅突出显示当前悬停的嵌套列表项

4 个答案: