CSS 搞事技巧：hover+active

cangck_X 发布于2019-08-30 15:43 / 649人阅读

摘要：核心概念保存状态。在上一篇搞事技巧中利用来加深了解了的弹性容器属性，这一节是要利用来了解的弹性项目属性。最后很多属性我们可能难以理解其效果，个人认为运用来解释不失为一种良好的方式。

介绍

在 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 固化了垂直居中的样式：


  hello flex item

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

大哥
二弟
三妹

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

查看一下效果：

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 不失为一种良好的方式。

参考资料

MDN

中国色

GPU云服务器云服务器 css技巧 hover hover延时 hover用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116045.html

CSS 搞事技巧：border+transparent

摘要：默认盒模型的正方形在上方已经说明了，正方形的被挤压为时就会得到三角形的效果。这里选择一种较为取巧的形式，因为这边使用的是行内样式，所以可以直接在它的上获取。面试前还是要为面试刷下题目的，不然真的容易懵介绍出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：面试官：巴拉巴拉吧…… 我：嗯，啊，这个，...

nifhlheimr 2019-08-29 18:37 评论0 收藏0
重温 Flex 布局

摘要：而通过实现则简单多了源码原因解释中间一栏为核心，所以需要优先渲染，结构也就放在了前面，主要是使用属性将放置到前方。源码的列数每列的个数函数原因解释实现瀑布流还是比较简单的。介绍这是关于 Flex 布局的实践，原想还水一点字数来介绍 Flex 相关属性，想想还是算了，阮一峰大佬的两篇文章推上： Flex 布局教程：语法篇 Flex 布局教程：实例篇如何用 CSS 来增进对 Fl...

binta 2019-08-30 15:43 评论0 收藏0
CSS 搞事技巧：checkbox+label+selector

摘要：列出这个两个属性的常用值看可知已经增加了更多的值代码解读该项目是通过来渲染的，所以会使用到的语法，不过此处仅使用的循环来解决重复书写的问题该效果参考来源。接着使用布局来将它们分割，因为这次主要将的不是，所以就不进行阐述了。介绍其实这篇文章写到一大半时它的名字还叫做《重温 Flex 布局》，结果写着写着就走了心，附上一图表示心情吧： showImg(https://segmentf...

alphahans 2019-08-30 15:43 评论0 收藏0