總結
使用純 CSS 製作:hover後顯現<input type="search">的效果
See the Pen 0717 landing by Charlie (@Charlie7779) on CodePen.
筆記
header結構
CSS
- 第 2 行：設定作為容器的
.nav__search為position: relative;，方便#nav__search--input進行定位 - 第 5 行：
flex-direction: row-reverse;讓<input type="search">在視覺上位於<label>左手邊- 讓
<label>在 HTML 結構上排序於<input type="search">之前是為了在<label>被:hover時可以去操作<input type="search">的樣式 - 先
input再label的話，無法透過 CSS 選取器從label反抓到input
- 讓
- 第 22-23 行：
#nav__search--input設定為position: absolute;，並right: 0;，使其根據容器.nav__search右側進行對齊 - 第 28-29 行：設定
border: 0;與outline: none;取消任何外框線效果 - 第 36 行：
transform: scaleX(0);令#nav__search--input在一般狀態下寬度為 0 - 第 37 行：
transform-origin: right;使#nav__search--input的:hover變形效果從右側開始 - 第 41-45 行：在
.nav__search--label被:hover後，或是#nav__search--input本身就被:hover或:focus時，展開#nav__search--input