---
# System prepended metadata

title: 滑鼠事件切換圖片src

---

# 滑鼠事件切換圖片src

mouseenter 與 mouseleave

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

```html=
<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

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

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

```html=
  <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)

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