# [JS30] Day.22 Follow Along Links
###### tags: `JS30`
## 任務 Task
依據移動到的 `Anchor Tag` 更改 `highlight` 的大小，並能有移動的效果。

==完成時間：15min==
## 步驟 Step
1. 建立元素 `span` 給他一個 `highlight` 的 `class`，並加入文件裡。
2. 監聽各個 `link` 的 `mouseenter event` ，並使用 `getBoundingClientRect()` 抓取長寬及在視窗中的位置。
3. 因為 `top` `left` 是相對於視窗的位置，在滾動時會固定不變，所以要把 `window.scrollX` `window.scrollY` 加進去。
4. 將 `link` 的長寬及位置資訊加入 `higtlight` 的樣式裡（`top` `left` 用 `translate` 的方式，就會有移動的效果）。
## 筆記 Note
### <font color=#337EA9>JS Element.getBoundingClientRect()</font>
* 回傳一個 `DOMRect` 物件，提供元素的大小及相對於視窗的所在位置。

* 另一個 ==`Element.getClientRect()`== 回傳的是一個 `DOMRectList` 包含所有的 `DOMRect` 及被折行的數量 `length`。
### <font color=#337EA9>JS mouseenter event</font>
* 當滑鼠移動到元素時會觸發。
* 與 `mouseover` 不同的地方在於 `mouseover` 會有冒泡事件，`mouseenter` 沒有支援冒泡。
<iframe height="300" style="width: 100%;" scrolling="no" title="Mouseenter &amp; Mouseover" src="https://codepen.io/jim876633/embed/PoRqeap?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/PoRqeap">
Mouseenter &amp; Mouseover</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

* 監聽外層 `ol` 的 ==`mouseover`== 時，滑到子物件及離開子物件時，都會觸發事件（冒泡）。
監聽外層 `ol` 的 ==`mouseenter`== 時，滑到子物件並不會觸發事件。