通过CSS鼠标悬停突出显示自定义

Question

以下是我在Confluence实例上实现的目录。

外观已经过自定义，因此当用鼠标悬停在菜单项上时，与 2一样，突出显示相应的菜单项。上图中的导航栏菜单项。

悬停效果是通过以下CSS代码实现的：

.toc-link:hover {
background-color: #e5e5e5;
text-decoration: none;
}

尽管如此，我还是希望悬停效果能够覆盖整个框的宽度，类似于下图：

我必须在CSS代码中插入什么属性才能达到预期的效果？

谢谢。

Answer 1

这可以通过在display:block元素上设置<a>来实现。悬停样式应位于锚标记上，而不应位于<li>上，例如：

a {
  display: block;
  text-decoration: none;
}

a:hover {
  background-color: #e5e5e5;
}

<ul>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

如果列表项内部没有定位标记，则可以这样实现：

li {
  display: block;
}

li:hover {
  background-color: #e5e5e5;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Answer 2

您可以尝试以下方法：

#content {
  border: 1px solid #DDDDDD;
  background-color: #F6F6F6;
  padding-right: 25px;
}

li{
  padding: 5px;
  list-style: none;
}

li:before {
  content: "• ";
  color: #ABADBB;
}

li:hover {
  background-color: #DDDDDD;
}

<div id="content">
  <ul>
    <li>
      Opening the Asset Browser
    </li>
    <ul>
      <li>1. Menu</li>
      <li>2. Navigation Bar</li>
      <li>3. Folder Tree</li>
      <li>4. Search Result Pane</li>
    </ul>
    <li>
      Live Updates for Asset Resources Selectors
    </li>
    <li>
      Texture Tool-tips
    </li>
  </ul>
</div>