今天的實作是接續第二十二堂的Follow Along Link Highlighter，算是他的進階版。而我們要做的效果是個非常常見且實用又美觀的下拉選單，他可以隨著滑鼠在導覽列移動到不同標籤時，根據其選單內容產生不同形狀大小的框框，實作範例如下：

邏輯流程

1. 建立導覽列元素的mouseenter和mouseleave監聽
2. mouseenter時將元素加入顯示內容之CSS樣式
3. mouseleave時將加入之CSS樣式移除
4. 抓取元素之長寬及邊界之XY值
5. 利用上步驟結果，設定白色框背景的長寬及位置

課程重點

1. 箭頭函式：影片中在setTimeout那段的Code原本一開始是寫

   function handleEnter() {
   	setTimeout(fuction(){
   	    this.classList.add('trigger-enter-active')
   	}, 150);
   }
   triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
   

   但這邊的this是回傳一個window，因此我們可以利用ES6綁定this的特色，將函式改為用箭頭函式來寫，這時this就會是這個mouseenter的元素。
2. getBoundingClientRect()：在這堂的前導課程也有用過，是用來得到元素的邊界坐標值及長寬等屬性。