[菜鸟笔记] :hover 的用法

本来今天没有要写这篇文章，但写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 下拉式选单