html - 悬停 li 没有覆盖整个 li - css

Question

如下面的 CSS 所示，当我运行元素并将鼠标悬停在 li 上时颜色只影响文本的背景，而不影响整个 li 行。
但是当我将代码更改为下面时，它覆盖了整行。

.items-results li:hover {
     background-color: #000;
 }

这是怎么回事？

.items-html--menu:hover {
  background-color: #000;
}

<ul class="items-results" id="item-results">
  <li class="items-html--menu">HTML</li>
  <li class="items-html--menu">CSS</li>
</ul>

Answer 1

点不是 LI 的一部分，因此您必须删除列表样式并使用伪元素(即:之前)

.items-html--menu {
  list-style: none;
}

.items-html--menu:hover {
  background-color: #000;
}

.items-html--menu:before {
  content: "\2022";
  padding: 0 10px 0 0;
}

<ul class="items-results" id="item-results">
  <li class="items-html--menu">HTML</li>
  <li class="items-html--menu">CSS</li>
</ul>