如何让bootstrap列表组高亮颜色统一

Question

我正在开发一个使用 Bootstrap 水平列表组的网站。一切都很好，但是当我将鼠标悬停在特定列表组上时，突出显示效果也不会更改文本元素的背景颜色，这会创建看起来很奇怪的白色框。如何使这些元素的背景颜色也更改为突出显示颜色，以便整个列表组看起来统一？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<ul class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0" aria-current="true">
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
  </a>
</ul>

<ul class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0" aria-current="true">
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
  </a>
</ul>

<ul class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0" aria-current="true">
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
  </a>
</ul>

我尝试过各种不同的CSS样式，但我不擅长CSS，所以我确定我做得不正确。

Answer 1

如果您使用谷歌浏览器，您可以右键单击并检查元素，这在这种情况下非常有用，因为您可以看到需要定位的元素。

您只需在列表项上添加悬停效果，即“list-group-item border-0”，并将背景设置为相同的灰色。