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 下拉式選單