Follow Along Link Highlighter 滑鼠hover特效

這次的效果覺得有點像是css hover的加強版，當你移動到特定的文字身上時，會出現一個底色，強調的概念。當滑鼠從一個文字移動到另一個文字上，他會有位移的變化，看起來很酷。

個人codepen

技巧點

1. mouseEnter、mouseLeave、mouseOver、mouseOut、mouseMove滑鼠移動事件

• 大致上mouseEnter和mouseOver是一樣的，mouseLeave和mouseOut是一樣。
• 使用上常會mouseEnter搭配mouseLeave；反之，mouseOver搭配mouseOut。

• 有沒有冒泡行為，到底有什麼差異呢！？假設我有底下的一個html結構，預設都會是在div身上綁定監聽事件。

<div>
  <p>test</p>
</div>

• 假設現在是綁定mouseOver的監聽，當你一進入到div的範圍內就會觸發一次，當你滑鼠鼠標移動到身上，因為冒泡的緣故，事件會再次觸發．從p標籤身在移出後，到div身上又會觸發一次事件。
• mouseEnter不管你在元素內移動到哪裡，都只會觸發一次。
  可以看範例。

2. offsetLeft、offsetTop

• 這兩個的解釋，都是指會返回元素相對於其offsetParent元素的頂部或左邊界的距離。
• 這個offsetParent是指：離元素最近的祖先元素且有設定定位，當祖先元素都沒有設定定位，offsetParent會指向body!

<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Order Status</a></li>
    <li><a href="#">Tweets</a></li>
    <li><a href="#">Read Our History</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>
// 上述的結構中，a標籤會是事件觸發後，要取得offsetLeft、offsetTop的對象，他的祖先上層元素都沒有設定position，所以offsetParent會指向body。
// 你可以試著在我codepen中將ul元素設定定位，你會發現這個highlight的效果位置跑掉了．

• 影片中則是用了getBoundingClientRect這個方法，因為返回的值是相對於視窗口viewport，所以當視窗有捲動時，那個相對於Y軸的位移就不準確，所以要額外加上window.scrollY，效果才會正常。

3. transform位移 以及 position的left、top位移

• transform本身不會改動元素的真實位置，只是視覺上他移動了，他還是佔著他該有的元素大小位置．不會影響css佈局。
  但left、top會真實改變元素位置．畫面需要重新繪製，所以效率上可能沒transform好。
• 可以看示範，會更清楚

心得

滿簡單好操作的效果，也從新去認識一次不同mouse event的差別在哪裡，連css的在同樣效果的操作上，有何不同，也一併釐清。希望以後忘記的時候可以回來看看自己的文章～