I’m working on a website that uses Bootstrap’s horizontal list groups. Everything works great, but when I hover over a particular list group, the highlighting effect is not also changing the background color of the text elements, which creates odd looking white boxes. How can I make the background color of those elements also change to the highlight color so the entire list group appears uniform?
<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>
I’ve tried various different css styles, but I’m not good at css so I’m sure I’m not doing it correctly.