1

The default background color on hover is a light-ish gray. I have the following dropdown in a navbar.

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

I tried to change the hover background it with the following CSS

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

Edit: Changing dropdown-item for dropdown-mine worked. However

When I try to change the background on click it doesn't work:

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

I tried adding !important to it but no result.

Edit: I also tried .nav-item-dropdown

FlowMafia
  • 922
  • 2
  • 19
  • 37
  • 1
    Unless I am mistaken, you are trying to apply your CSS styles to a class called `dropdown-item`. Your class should be `dropdown-mine` or if you want to apply it to all the dropdown-items, it will simply be the name of the tag without the dot. – pensum Nov 21 '19 at 00:31
  • @pensum appears to be correct, change it to `.dropdown-mine:hover{ background-color:red; }` – EGC Nov 21 '19 at 00:34
  • The `b-dropdown-item` component adds the `dropdown-item` class. `dropdown-mine` simply extends the class list. – Cue Nov 21 '19 at 00:35
  • I forgot about something in my question. I edited it – FlowMafia Nov 21 '19 at 00:39
  • Have you inspected the styles in DevTools to see if your rules are being applied and that they are possibly being overridden by bootstrap styles? That would narrow things down a little. – Cue Nov 21 '19 at 00:41
  • Yes. My style isn't being applied on the dropdown-item:focus class, However adding !important to my code isn't doing anything – FlowMafia Nov 21 '19 at 00:45
  • nvm, i had to add !important to .dropdown-item, not .dropdown-mine, it works now, thank you – FlowMafia Nov 21 '19 at 00:47
  • I will post an answer that could lighten your code if it helps, tell me. – pensum Nov 21 '19 at 00:49

1 Answers1

0

Perhaps you should try this:

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

I am not familiar with Vue.js but I have found a similar question on Stackoverflow that gave this answer. You can read more about the ::v-deep selector here.

pensum
  • 980
  • 1
  • 11
  • 25