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

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。

    <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:hover { border: 1px solid black; }

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>