Changing CSS of Angular UI dropdown list doesn't work

Question

In this plunk I have an Angular UI dropdown list with a class that attempts to change the color of the items in the list when the cursor is on the item (on hover)

I tried assigning a class to the <li> on hover and it doesn't work. Setting the class without on hover does work.

This is the attempt:

CSS

li.ddl-li {
  background-color:yellow;   /* works */
}

li.ddl-li:hover {
  background-color:orange;  /* doesn't work */
}

HTML

  <div class="btn-group" uib-dropdown>
    <button id="btn-append-to-body" type="button" class="btn btn-primary" 
           uib-dropdown-toggle="">{{selection}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" ng-click="selectItem($event)" uib-dropdown-menu="" 
            role="menu" aria-labelledby="btn-append-to-body">
       <li role="menuitem" class="ddl-li">
          <a href="#" data-value="1" >The first item</a>
        </li>
        <li role="menuitem" class="ddl-li">
          <a href="#" data-value="2">Another item</a>
        </li>
        <li role="menuitem" class="ddl-li">
          <a href="#" data-value="3">Yet another item</a>
        </li>
    </ul>
  </div>

The.Bear · Accepted Answer · 2017-02-27 04:48:48Z

2

You have to change the background-color of the <a></a> element inside your custom class.
I've forked your plunker

CSS:

li.ddl-li a {
  background-color: yellow;
}

li.ddl-li a:hover {
  background-color: orange;
}

Option without add a custom class.
You can override .dropdown-menu bootstrap class :

ul.dropdown-menu li a {
  background-color: #eee;
}

ul.dropdown-menu li a:hover {
  background-color: #bbb;
}

answered Feb 27, 2017 at 4:48

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ōkami X Oukarin · Accepted Answer · 2017-02-27 04:46:00Z

2

change to a element instead of li. a took cover all li elemt, so you hover a, not li

li.ddl-li a:hover {
      background-color:orange;
    }

answered Feb 27, 2017 at 4:46

Ōkami X Oukarin

4355 silver badges18 bronze badges

Collectives™ on Stack Overflow

Changing CSS of Angular UI dropdown list doesn't work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related