CSS 搞事技巧：hover+active

古城微笑少年丶 2022-05-01 12:28 197阅读 0赞

## 介绍 ##

在 JavaScript 中，我们可以利用变量，DOM 来保存状态，而 CSS 当中，我们也可以利用伪类选择器来保存状态，这就是 CSS 搞事的核心了。

核心概念：**保存状态**。

在上一篇 [CSS 搞事技巧：checkbox+label+selector][CSS _checkbox_label_selector] 中利用 **checkbox+label+selector** 来加深了解了 Flex 的弹性容器属性，这一节是要利用 **:hover+:active** 来了解 Flex 的弹性项目属性。

这两个属性你有没有很熟悉呢，其实我们经常在 `a` 标签上使用它们

> `LVHA` 顺序: `:link` — `:visited` — `:hover` — `:active`

效果图：

**[示例源码][Link 1]**、**[在线示例][Link 2]**

## 示例 ##

由于作者找不到工作，陷入自闭缺乏创作激情，所以这一个环节就略过……

## 技巧说明 ##

`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>
    复制代码

为它们增加样式，并添加伪元素：

查看一下效果：

### 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
    复制代码

查看效果：

### 3. `:active` ###

在我的记忆中，`:active` 是对任何元素都生效的，结果伪元素上设置失败了，然后就去看了下 MDN：

或许伪元素与元素本身算作一体？还是说要选择到父元素（线索：`: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
    复制代码

查看效果：

为伪类添加 `: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)
    复制代码

查看效果：

### 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.  [中国色][Link 3]

转载于:https://juejin.im/post/5ca2bd3a6fb9a05e146d6ddc

[CSS _checkbox_label_selector]: https://juejin.im/post/5ca1de14e51d4530385d8d19
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fshanyuhai123%2Fcss-properties%2Fblob%2Fmaster%2Fdocs%2F.vuepress%2Fcomponents%2FFlex%2FFlex-item.vue
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fcss.shanyuhai.top%2Fdemos%2F04-flex-item.html
[MDN]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS
[Link 3]: https://link.juejin.im?target=http%3A%2F%2Fzhongguose.com