# 滑鼠事件切換圖片src

mouseenter 與 mouseleave

方法1：在HTML中用template綁定，指定t.src

<img src="/assets/logo/logo-512.png" class="h-1/3 block" alt=""
       (mouseenter)="t.src='/assets/logo/logo-immortal-512.png'" (mouseleave)="t.src='/assets/logo/logo-512.png'" #t>

方法2：指定成員

在Typescript中新增Member

    logoSrc = '/assets/logo/logo-512.png';

接著在HTML中用事件切換`[src]`的值

  <img [src]="logoSrc" class="h-1/3 block" alt=""
       (mouseenter)="logoSrc='/assets/logo/logo-immortal-512.png'" (mouseleave)="logoSrc='/assets/logo/logo-512.png'">

---

[mouseover 與 mouseenter的差異](https://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover)

子元素之間進入的事件也會觸發