更改排序列表背景颜色

RoiEX 发表于 Dev

RoiEX

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

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

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

和

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

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

有没有一种方法可以在没有JScript的情况下解决此问题，或者属于缺少“父母选择的CSS支持”的问题？

或德罗里

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。