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  id="pills-tab" role="tablist">
                <li  role="presentation">
                    <button  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  role="presentation">
                    <button  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  role="presentation">
                    <button  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>

CodePudding user response：

have you try this way?

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