更改已排序列表背景颜色

Question

我目前正在使用CSS在HTML中进行小型导航。 我有一个排序列表，每个li元素包含一个链接。 我希望它在悬停在它上面时改变背景颜色。问题是，告诉您列表项索引的数字不会被更改，因为“this”背景不是li元素的一部分。 Example

“拥有”此背景的ol元素是整个列表，但我只是想要更改此特定列表条目的背景。
我的代码是：

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

和

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

navig类用于表明链接属于导航。

有没有办法在没有JScript的情况下修复此问题，或者将此属于缺少的“父选择CSS支持”的事情？

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计数器显式生成数字。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;