Ionic avoid gray-out items on hover... <p>I have the next list of carss whose header is clickable so it can be toggled on and off. Nevertheless, whenever I click on one of them, it turns gray. I would like to change this behavior and keep color unchanged. </p> <pre><code>&lt;div class="list"&gt; &lt;div ng-repeat="event in searchResultEvents"&gt; &lt;div class="card"&gt; &lt;div class="item item-avatar item-icon-right" ng-click="toggleEvent(event)"&gt; &lt;img src={{event.icon}}&gt; &lt;i class="icon" style="font-size: 18px;" ng-class="isEventShown(event) ? 'ion-chevron-up' : 'ion-chevron-down'" ng-style="{ background: backgroundForEvent(event), color: 'grey' }"&gt;&lt;/i&gt; &lt;h2&gt;&lt;b&gt;{{event.title}}&lt;/b&gt;&lt;/h2&gt; &lt;p&gt;&lt;span&gt;{{event.dayOfWeek}} {{event.dateTime.getDate()}}&lt;/span&gt; - &lt;span style="color:forestgreen"&gt;{{event.dateTime.toTimeString().substr(0,5)}}h&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class="item item-body" ng-hide="!isEventShown(event)"&gt; &lt;div&gt; &lt;p ng-bind-html="event.description | hrefToJS"&gt;&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;br /&gt; &lt;div&gt; &lt;i class="icon ion-map balanced" style="font-size: 25px;"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;p ng-bind-html="event.place | hrefToJS" style="display:inline"&gt;&lt;/p&gt; </code></pre> <p>I have tried this:</p> <p><a href="http://stackoverflow.com/questions/28664768/changing-background-color-of-ionic-list-item-on-hover-in-css">Changing background color of Ionic list item on hover in CSS</a></p> <p>But no luck. Perhaps this is not the CSS or I am not putting it where it belongs. I have tried adding it to ionic.app.scss (I am using SCSS instead of plain CSS). </p> <p>I have made some SCSS changes on that file before and it seemed to work... what am I doing wrong now?.</p> <p>Thanks in advance</p>