Настройка выделения при наведении мыши с помощью CSS

Question

Ниже приведено оглавление, которое я реализовал для экземпляра Confluence.

Его внешний вид настроен таким образом, что при наведении курсора на элемент меню с помощью мыши соответствующий элемент меню выделяется, как в случае 2. Панель навигации пункт меню на изображении выше.

Эффект парения достигается с помощью следующего кода CSS:

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

Хотелось бы, чтобы эффект наведения охватывал всю ширину окна, как показано на рисунке ниже:

Какое свойство мне нужно будет вставить в мой код CSS для достижения желаемого эффекта?

Спасибо.

Answer 1

Вы можете попробовать это:

#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>

Answer 2

Этого можно достичь, установив 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>