如何更改 hover 颜色 Bootstrap 5 动态选项卡

Question

picture of my tabs

I want to change the color that when I hovering mouse over text to white.

I did add this code but it doesn't work.

<style>
.nav-link > .hover {
    color: white;
}
</style>

            <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                        aria-selected="true">วันจันทร์</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link " id="pills-profile-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                        aria-selected="false">วันอังคาร</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link " id="pills-contact-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
                        aria-selected="false">วันพุธ</button>
                </li>
            </ul>

Answer 1

have you try this way?

.nav-link {
  color: red;
}
.nav-link:hover {
  color: white;
}