Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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>
share|improve this question
up vote 1 down vote accepted

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;
}
share|improve this answer
up vote 1 down vote

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;
    }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.