更改排序列表背景颜色

Question

我目前正在使用 CSS 在 HTML 中做一个小导航。我有一个排序列表，每个 li 元素都包含 link。我希望它在将鼠标悬停在其上时更改背景颜色。问题是，告诉您列表项索引的数字不会更改，因为 "this" 背景不是 li 元素的一部分。 Example

ol 元素，"owns" 这个背景是整个列表，但我只想更改这个特定列表条目的背景。
我的代码是：

.navig a:hover{
    background-color: #555;
    color: white;
}

和

<ol>
    <li>
        <a href="target.php">target</a>
    </li>
</ol>

navigclass用于明确link属于导航

有没有不用 JScript 解决这个问题的方法，或者这个属于缺失的 "CSS support for parent selecting" 东西？

Answer 1

使用 list-style-position: inside; 将数字/项目符号移动到 li 元素中：

ol {
  background: #ff9999;
  padding: 0;
  list-style-position: inside;
}
li {
  padding: 5px;
}
li:hover {
  background: #ffe5e5;
}
li > a {
  display: block;
  color: black;
  text-decoration: none;
}

<ol>
 <li>
  <a href="https://www.google.co.il/search?q=coffee">Coffee</a>
 </li>
 <li>
  <a href="https://www.google.co.il/search?q=tea">Tea</a>
 </li>
 <li>
  <a href="https://www.google.co.il/webhp?q=coca+cola">Coca Cola<a>
 </li>
</ol>

Answer 2

here 所述的另一种解决方案是将您的列表转换为 DL/DT 列表，并使用 CSS 计数器显式生成数字。

.navig {
  counter-reset: navig-counter;
}
.navig dt:hover {
  background-color: #555;
  color: white;
}
.navig dt:before {
  content: counter(navig-counter);
  counter-increment: navig-counter;
  margin-right: 5px;
}

<dl class="navig">
  <dt><a href="#">First item</a></dt>
  <dt><a href="#">Second item</a></dt>
  <dt><a href="#">Third item</a></dt>
</dl>

更改排序列表背景颜色

Change Sorted List Background color

html

css

background-color

html-lists