CSS 搞事技巧：hover+active

介绍

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

核心概念：保存状态。

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

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

LVHA 顺序: :link — :visited — :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>

查看一下效果：

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. 中国色