如何让Bootstrap列表组hover高亮颜色保持统一？

问题根源 #

你的HTML结构不符合语义规范：<ul>的直接子元素必须是<li>，但你把<a>直接放在了<ul>下，再在<a>里嵌套<li>。这种错误结构导致内部<li>继承了list-group-item的默认白色背景，当外层<a>触发hover高亮时，内部<li>的白色背景就会突兀显示。

修复方案 #

1. 修正HTML结构（推荐）

把<a>放到<li>内部，让<ul>的子元素是<li>，既符合HTML语义，也能避免样式冲突：

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

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </li>
</ul>

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </li>
</ul>

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </li>
</ul>

这里把原来内部的<li>换成<span>，因为它们仅作为文本容器，不需要列表项语义。

2. 兼容原有结构的CSS方案（临时过渡用）

如果暂时无法修改HTML结构，可以通过CSS强制让hover时内部<li>的背景继承父元素的高亮色：

/* 外层a hover时，内部所有li背景色跟随父元素 */
.list-group-item-action:hover .list-group-item {
  background-color: inherit;
}

完整可运行代码 #

结合修正后的结构与自定义hover样式，最终代码如下：

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

<style>
/* 可选：自定义hover高亮色，覆盖Bootstrap默认样式 */
.list-group-item-action:hover {
  background-color: #e9ecef;
}
</style>

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </li>
</ul>

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </li>
</ul>

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Brian Rottman