Comment changer l'arrière-plan du survol et l'arrière-plan en cliquant sur un élément de la liste déroulante Bootstrap Vue?

FlowMafia

La couleur d'arrière-plan par défaut au survol est un gris clair. J'ai la liste déroulante suivante dans une barre de navigation.

<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>

J'ai essayé de changer l'arrière-plan du survol avec le CSS suivant

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

Edit: Changer l'élément de liste déroulante pour le menu déroulant a fonctionné. toutefois

Lorsque j'essaye de changer l'arrière-plan en cliquant, cela ne fonctionne pas:

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

J'ai essayé d'ajouter! Important mais aucun résultat.

Edit: j'ai aussi essayé .nav-item-dropdown

pensum

Vous devriez peut-être essayer ceci:

.dropdown-item {
  & ::v-deep .dropdown-mine {
    background-color: green;
  }
}

Je ne connais pas Vue.js mais j'ai trouvé une question similaire sur Stackoverflow qui a donné cette réponse. Vous pouvez en savoir plus sur le ::v-deepsélecteur ici .

Articles connexes