title: CSS Custom properties in Ionic 4: background-hover
body: <p>I'm trying to change the background colour on hover of an ion-item inside an ion-list. Working in ionic 4.</p>
  
  <p>I've set up a list with *ngFor="let ....". Inside this, I put my ion-items. The list works perfectly. But I can't figure out why only some of the ionic provided CSS custom properties work. For example, I can't get --background-hover to do anything. </p>
  
  <p>See the ionic doc page for the ion-item. This shows the full list of css custom properties: <a href="https://ionicframework.com/docs/api/item" rel="nofollow noreferrer">https://ionicframework.com/docs/api/item</a>. </p>
  
  <p>In .html file:</p>
  
  <pre><code>&lt;ion-list&gt;
    &lt;ion-item  *ngFor="let item of animateItems; let i = index;"&gt;
       [-- contents of item --]
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>In .scss file, this does not seem to work.</p>
  
  <pre><code>ion-item {
      --background-hover: #cccccc;
  }
  </code></pre>
  
  <p>However, this does work:</p>
  
  <pre><code>ion-item {
      --background: #eeeeee;
  }
  </code></pre>
  
  <p>Based on my understanding of the --background-hover CSS property, I expect the ion-item to turn grey when I hover over it with my mouse. Anyone know what I'm ding wrong, or why this does not work as per the ionic documentation.</p>