因為不小心按到 X 所以全部正在重寫中
時間晚了也累了
直接先用codepen寫了一個簡單的範例

是不是很常在逛網展的時候都會有這種滑過顯示的效果？
到底該怎麼用css做才好，以往我都會想到說可能就用js吧
但其實我們可以用純CSS的方式來顯示

直接先來看範例
https://codepen.io/scps960423/pen/dJNEPZ

首先是html的部分
我們先來做一個簡單的想法釐清
還記得如果我們要做當滑鼠移動過去的時候改變字體顏色就是這樣寫嗎

.button:hover{
background-color:red;
}

我們講成中文就是 class是套用button的標籤在滑鼠移動過去的時候會改變背景顏色為紅色
那現在我們要做的事情是顯示一個區塊A
區塊Ａ預設顯示為不顯示 ， 畢竟我們要滑過顯示
預設為不顯示很簡單就是 display:none;
但是當我的button是被滑鼠滑過的 狀態 的時候 區塊Ａ就會顯示
我們把這句話寫成css

.button:hover 區塊Ａ{
    display:block; /*將區塊顯示*/
}

那從我們前幾天講過的CSS選擇器的關係可以知道 我們的區塊Ａ必須是包裹在button裡面的
所以我們html會長這樣

<div class="button">
  <span>滑我</span>
  <div class="hover">
  test
  </div>
</div>

完整CSS

body{
   background-color:#343434;
}
.button{
  width:100px;
  text-align: center;
  color:#fff;
  font-size:3em;
}
.button:hover .hover{
  display:block;
}
.hover{
  display:none;
  background-color:#ffb2b2;
}

那今天就大概是到這邊！發現要連續連文章真的好困難