Changing background color of Ionic list item on hover in CSS

ionic-v1
1

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.

1 Like
2

Hi, try with .active class

.item.active, .item.activated, .item-complex.active .item-content, .item-complex.activated .item-content, .item .item-content.active, .item .item-content.activated {
border-color: #ccc;
background-color: #ff0000;
}

3

@BenHen75 I tried your code above but it only worked for the menu items and not the ion-item. Also, I’m trying to do it for ionic app using ion-list ion-item.