CSS 搞事技巧：hover+active

shanyuhai123發表於2019-04-02
CSS

介紹

在 JavaScript 中，我們可以利用變數，DOM 來儲存狀態，而 CSS 當中，我們也可以利用偽類選擇器來儲存狀態，這就是 CSS 搞事的核心了。

核心概念：儲存狀態。

在上一篇 CSS 搞事技巧：checkbox+label+selector 中利用 checkbox+label+selector 來加深瞭解了 Flex 的彈性容器屬性，這一節是要利用 :hover+:active 來了解 Flex 的彈性專案屬性。

這兩個屬性你有沒有很熟悉呢，其實我們經常在 a 標籤上使用它們

LVHA 順序: :link — :visited — :hover — :active

效果圖：

CSS 搞事技巧：hover+active

示例原始碼、線上示例

示例

由於作者找不到工作，陷入自閉缺乏創作激情，所以這一個環節就略過……

技巧說明

hover 觸發時，隱藏的子元素顯示；active 觸發時，子元素按照需求變化。

程式碼解讀

1. 基礎佈局

因為展示性的東西需要垂直居中展示，所以我利用 Vue 的 props 固化了垂直居中的樣式：

<Layout-Layout
  align-center
  justify-center
  :background-color="bgColor"
>
  hello flex item
</Layout-Layout>
複製程式碼

為了更容易演示，有請高矮胖瘦均不一致的三兄弟：

<div class="flex__item">大哥</div>
<div class="flex__item">二弟</div>
<div class="flex__item">三妹</div>
複製程式碼

為它們增加樣式，並新增偽元素：

<style lang="stylus" scoped>
.flex__item
  width 15%
  height 15%
  box-shadow 0 0 4px rgba(0, 0, 0, .5), inset 2px 0 1px rgba(0, 0, 0, .2)
  display flex
  align-items center
  justify-content center
  color #142334 // 鋼青
  &:nth-child(1)
    width 20%
    height 20%
  &:nth-child(2)
    width 16%
    height 18%
  &:nth-child(3)
    width 14%
    height 28%
  &::before
    position absolute
    content '一人得道'
    padding 10px 6px
    border-radius 6px
    color #e0c8d1 // 淡青紫
    background-color #1661ab // 靛青
   &::after
    position absolute
    content '背水一戰'
    padding 10px 6px
    border-radius 6px
    color #e0c8d1 // 淡青紫
    background-color #1661ab // 靛青
</style>
複製程式碼

檢視一下效果：

CSS 搞事技巧：hover+active

2. :hover

基礎佈局完成，接著是新增 :hover 效果。當滑鼠懸停時，兩個偽元素將會顯示，並且一個往上一個往下：

.flex__item
  &::before
    opacity 0
   &::after
    opacity 0

.flex__item:hover::before
  transform translateY(-80px)
  opacity 1
.flex__item:hover::after
  transform translateY(80px)
  opacity 1
複製程式碼

檢視效果：

CSS 搞事技巧：hover+active

3. :active

在我的記憶中，:active 是對任何元素都生效的，結果偽元素上設定失敗了，然後就去看了下 MDN：

CSS 搞事技巧：hover+active

或許偽元素與元素本身算作一體？還是說要選擇到父元素（線索：:focus-within）？這個留之後解決吧，FLag +1。取捨的辦法還是有的（偽裝），犧牲帶頭大哥吧：

.flex__item
  &:nth-child(1)
    width 20%
    height 20%
    &::after
      position absolute
      content '背水一戰'
      padding 10px 6px
      border-radius 6px
      color #e0c8d1 // 淡青紫
      background-color #1661ab // 靛青
      transition all 0.5s linear
      opacity 0
  &:nth-child(2)
    width 16%
    height 18%
    &::before
      position absolute
      content '一人得道'
      padding 10px 6px
      border-radius 6px
      color #e0c8d1 // 淡青紫
      background-color #1661ab // 靛青
      transition all 0.5s linear
      opacity 0
  &:nth-child(3)
    width 14%
    height 28%
    &::before
      position absolute
      content '一人得道'
      padding 10px 6px
      border-radius 6px
      color #e0c8d1 // 淡青紫
      background-color #1661ab // 靛青
      transition all 0.5s linear
      opacity 0
複製程式碼

檢視效果：

CSS 搞事技巧：hover+active

為偽類新增 :active 效果：

.flex__item:active::before,
.flex__item:active::after
  color #f1908c // 榴子紅
  background-color #fff
  box-shadow 0 2px 4px rgba(0, 0, 0, .5), 2px 0 4px rgba(0, 0, 0, .6)
複製程式碼

檢視效果：

CSS 搞事技巧：hover+active

4. align-self

給子元素新增 align-self 不同的值：

.flex__item  
  &:nth-child(1)
    &:active
      align-self flex-end
  &:nth-child(2)
    &:active
      align-self flex-start
  &:nth-child(3)
      &:active
        align-self flex-start
複製程式碼

最後結果就如介紹中所示了。

最後

CSS 很多屬性我們可能難以理解其效果，個人認為運用 CSS 來解釋 CSS 不失為一種良好的方式。

參考資料

  1. MDN
  2. 中國色

相關文章