如何更改悬停背景和单击Bootstrap Vue下拉项时的背景？

Question

悬停时默认的背景颜色是浅灰色。我在导航栏中有以下下拉菜单。

<b-nav-item-dropdown text="TOOLS" right>
    <b-dropdown-item href="#" class="dropdown-mine">1</b-dropdown-item>
    <b-dropdown-item href="#" class="dropdown-mine">2</b-dropdown-item>
    <b-dropdown-item href="#" class="dropdown-mine">3</b-dropdown-item>
    <b-dropdown-item href="#" class="dropdown-mine">4</b-dropdown-item>
</b-nav-item-dropdown>

我尝试使用以下CSS更改悬停背景

.dropdown-item:hover{
    background-color:red;
 }

编辑：更改drop-mine的drop-item起作用了。但是

当我尝试更改单击背景时，它不起作用：

.dropdown-mine:focus{
    background-color:green;
 }

我尝试在其中添加！important，但没有结果。

编辑：我还尝试了.nav-item-dropdown

Answer 1

也许您应该尝试以下操作：

<TextField>

我对Vue.js不熟悉，但是我在Stackoverflow上找到了类似的问题，给出了这个答案。您可以详细了解.dropdown-item { & ::v-deep .dropdown-mine { background-color: green; } } 选择器here。