创建具有背景颜色的列表项，包括悬停时的列表项编号答案

【问题标题】：create a list item with a background color including list item number on hover创建具有背景颜色的列表项，包括悬停时的列表项编号
【发布时间】：2019-10-25 17:00:11
【问题描述】：

我正在尝试在悬停时创建一个带有背景颜色的有序列表，问题是我无法获得在悬停时更改颜色的数字。

https://jsfiddle.net/5ap327u9/1/

我尝试过使用 list-item-position: inside，但这会将数字放在内容上方，而不是像普通列表那样放在旁边

<div class="container">
  <ol>
  <li class="item-container">Help me get the background color to pink even the list number please.</li>
  </ol>
</div>

.container {
  ol li:hover {
        background: pink;
  }
}

我希望整行包括带有文本的数字来更改背景颜色

【问题讨论】：

“我尝试过使用 list-item-position: inside，但这会将数字放在内容上方，而不是像普通列表那样放在旁边” 不不。有用。但是，如果这就是您所看到的，那么您必须有更多的 CSS 或影响输出的代码。请发帖minimal reproducible example
@j08691 如果你签出 jsfiddle，你会发现实际上它不起作用。
你应该检查你的工作jsfiddle.net/j08691/yefbxtq2
@j08691 甜蜜。谢谢:)
但是等等，你说那没用

标签： html css

【解决方案1】：

你需要使用 list-style-position 而不是 list-item-position

ol {
list-style-position: inside;
}

【讨论】：