title: Angular 5 - On mouse enter show a button and on mouse leave hide a button
body: <p>When a user hovers over a list item i want a button to be displayed. When the user leaves the list item i want the button to not be displayed.</p>
  
  <p>I have come across a mouseenter event and a mouseleave. </p>
  
  <p><strong>.html</strong></p>
  
  <pre><code>&lt;mat-list-item (mouseenter)="enter($event)" (mouseleave)="leave($event)" class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign=""
      dir="ltl"&gt;
      &lt;div matLine&gt;
          &lt;b&gt;{{message.author.profile.username}} &lt;/b&gt;
          &lt;span&gt;{{message.created_at | date:'shortTime'}} &lt;/span&gt;
      &lt;/div&gt;
      &lt;button mat-icon-button&gt;
          &lt;mat-icon aria-label=""&gt;keyboard_arrow_down&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;span matLine&gt; {{message.body}} &lt;/span&gt;
      &lt;img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="..."&gt;
  &lt;/mat-list-item&gt;
  </code></pre>
  
  <p><strong>.ts</strong></p>
  
  <pre><code>enter(e) {
      console.log("enter");
  }
  
  leave(e) {
      console.log("leave");
  }
  </code></pre>
  
  <p>Apart from declaring these functions, i dont know how to target the button within this list item to show and hide it depending on if the user has entered the list-item block or left.</p>
  
  <p><a href="https://i.stack.imgur.com/uqLg2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uqLg2.png" alt="enter image description here"></a></p>