html - How to change pressed item background color in ion-list on Ionic? -

i have list of items, want change background color of pressed item in ionic project.

index.html

<ion-list>   <ion-item ng-repeat="item in familleitems">     <div ng-click="selectsousfamille(item.numfam)">{{item.nomfam}}</div>   </ion-item> </ion-list> 

help me please

highlight hover item

purely css

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

highlight active item

you add active css class using ng-class. define custom css 'active' class.

<ion-item ng-repeat="item in familleitems" ng-class="{'activeitem': active}">     <div ng-click="selectsousfamille(item.numfam)">{{item.nomfam}}</div> </ion-item> 

example:

<ion-content padding="true">     <ul class="product-list">         <!-- need .selected in stylesheet -->         <li ng-repeat="(key, item) in products" ng-class="{'selected':item.selected}">             <div class="list card" ng-click="select_item(key)">                 <p><span>{{item.title}}</span></p>                 <div class="item item-image">                     <img ng-src="{{item.photo}}">                 </div>             </div>         </li>     </ul> </ion-content> // stylesheet .selected {     // highlight style } // controller .controller('somecontroller', ['$scope', function ($scope) {    // expects array, product list may   $scope.products = [     { "title": "super man's tommy toy", "price": 20000, "thumb": "do_re_mi.jpg" },     { "title": "an old picture of seldom", "price": 1999, "thumb": "mi_re_do.gif" }   ];    // logic selection, e.g. unselect, select or   $scope.select_item = function (key) {     if ($scope.products[key]) {       $scope.products[key].selected = true;     }   } }]); 

source