如何保留Bootstrap list-group-item-action的hover效果并移除点击激活状态？

要保留list-group-item-action的hover背景效果，同时移除点击后的active状态样式，有两种简单的实现方式：

方法1：替换标签为div #

把原来的<a>标签换成<div>，保留list-group-item list-group-item-action类即可：

<div class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
    <!-- 内部内容保持不变 -->
</div>

div元素不属于可交互的链接/按钮类型，点击后不会触发Bootstrap为list-group-item-action定义的active/focus样式，同时hover效果完全保留，还能自动适配明暗模式的颜色变化。

方法2：CSS覆盖点击状态样式 #

如果不想修改标签结构，添加以下自定义CSS，取消点击后触发的active、focus状态样式，同时继承默认样式适配明暗模式：

.test_list_item:active,
.test_list_item:focus,
.test_list_item.active {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

通过inherit让元素在点击状态下继承默认的背景、文字颜色，确保和当前明暗模式的样式一致，同时移除Bootstrap添加的阴影效果，彻底消除点击后的active视觉变化。

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