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

Question

picture of my tabs

我想将鼠标悬停在文本上时的颜色更改为白色。

我确实添加了这段代码，但它不起作用。

<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

你试过这种方式吗？

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