本來今天沒有要寫這篇文章，但寫AC課程的作業時，對自己使用 :hover的用法感到迷惘
竟然不夠聰明，只好花時間勤能補拙啦~
研究一下:hover的使用方式

今天練習使用以下 HTML 來做一下不同種:hover的用法

<div class="container">
  <span class="test1">1</span>
  <span class="test2">2</span>
  <span class="test3">3</span>
  <div class="test4"></div>
  <div class="test5"></div>
  <div class="test6"></div>
</div>

A:hover
(1) 選取A元素並設定當滑鼠經過時的變化樣式
e.g. 選取span元素，當滑鼠滑過此元素，高度會從 50px 增加到 100px

span {
  display: block;
  width: 100px;
  height: 50px;
  ...
}

span:hover {
  height: 100px;
}

A:hover + B
(2) 設定選取A元素，當滑鼠滑過A元素時, B元素會產生指定的樣式變化
e.g. 當滑鼠滑過 span class="test3"的元素，指定隔壁div class="test4"顏色會從原本的淺藍色變粉色

div {
 width: 100px;
 height: 100px;
 background-color: lightblue;
 border: 2px solid white;
}

.test3:hover + .test4 {
  background-color: pink;
}

注意: 只有相鄰的元素才有辦法使用這個方式，上述如果換成".test2:hover .test4"，class名稱test4則不會有變化。

A:hover B
(3) 設定選取父元素, 當滑鼠滑過父元素時，指定子元素B會有指定樣式的變化。
e.g. 當滑鼠滑過.container父元素，指定的span區域寬度會從100px 變成 150px, 而 div區域則會變成200px

.container:hover span {
  width: 150px;
}

.container:hover div {
  width: 200px;
}

span 是粉色 /div為淺藍色:

現在，我們來試著加看看常搭配的transistion用法
呈上做法，我們只把transition加入到div區域，讓他這邊的寬度從100px到200px中間是3s的過程，跟上面沒有加transition的 span比就超明顯的~

div {
 width: 100px;
 height: 100px;
 background-color: lightblue;
 border: 2px solid white;
/*  新增此行transition到 div */
 transition: width 3s;
}

如果高度也有變化也要控制，也可以這樣寫 transition: A 秒數, B 秒數

div {
  transition: width 3s, height 4s;
}

這邊 A 和 B 就是放你想要加 transistion效果的屬性，他還有多種不同的用法去變化這個速度曲線，或者搭配不同種transform 變形。

詳情可以再查閱 W3school的transition用法
後語:因為AC課程初次學會使用gif動圖來做筆記，雖然醜了點但擁有小小的成就感XD 希望越做越好越完整

附上研究:hover的codepen

本來還想趁勢繼續研究一下W3school 下拉式選單 dropdown的用法，也用了很多:hover
在這存著, 留待下次學習
W3schools-dropdown 下拉式選單