Changing background color of Ionic list item on hover in CSS

Issue

I am using the Ionic framework for a mobile web application. I'm trying to change the background color of an Ionic list item on hover, but it won't change.

This is what's in my html:

        <ion-list>
            <ion-item ng-repeat="item in items" href="#/newpage">               
                <div>{{item.color}}</div>                       
            </ion-item>
        </ion-list>

This is what's in the CSS:

ion-item:hover {

    background-color: red;
    border-color: red;
}

The border color kind of works, but it only highlights the left, top, and right border of the item, not the bottom border. The background color does not change at all on hover. Is there a possibility that the href tag in the ion-item disables the CSS? If I remove the href tag, it works fine.

I've looked online for help, but no where have I found a solution or explanation to this problem. Any help is appreciated. Thanks.

Solution

Using the href attribute on the ion-item will generate the following HTML (stripped some attributes for clarity):

<ion-item href="#/newpage">
  <a ng-href="#/newpage" target="_self" href="#/newpage">
    <div class="ng-binding">Something</div>
  </a>
</ion-item>

You need to change the background color for the a element:

ion-item.item:hover a {
  background-color: slategray;
}

Note that the .item part is used to give the selector higher specificity. Otherwise the default background color for .item would be used instead.

Could also be solved with !important, but I prefer the former:

ion-item:hover a {
  background-color: slategray !important;
}

To style the border is trickier since the list elements have various margins depending on the position in the list (first, last or other). It's possible to counter this but it would push the adjacent elements 1px when one is hovered. Might be possible to solve this as well but it would probably require a bunch of new CSS.

An alternative solution is to use an inset box-shadow instead:

ion-item.item:hover a {
  background-color: slategray;
  box-shadow: inset 0px 0px 0px 1px red;
}

Demo: http://plnkr.co/edit/TCRbWhIQ6xJRx2qrgExs?p=preview

Answered By - tasseKATT