title: Styling mat-select when on hover - Angular Material
body: <p>I have a mat-select, but I'm having trouble changing the color of the value in each mat-option from black to white on hover. I can change them all by using</p>
  <pre><code>.mat-option {
    background-color: #e0e0e0;
    color: black !important;
  }
  </code></pre>
  <p>but it changes the one's that aren't hovering to white too, which I don't want.
  How can I change it to white only onhover? Non hovered items would be black</p>
  <pre><code>     &lt;mat-form-field id=&quot;filter&quot; appearance=&quot;outline&quot; class=&quot;formFields&quot;&gt;
          &lt;mat-select [(value)]=&quot;selected&quot;&gt;
            &lt;mat-option *ngFor=&quot;let number of quantity&quot; [value]=&quot;number&quot;&gt;{{number}}&lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
  </code></pre>
  <p>Here's a <a href="https://stackblitz.com/edit/angular-kcmxnv?file=src/app/select.component.css" rel="nofollow noreferrer">stackblitz</a></p>