introduce

In JavaScript, we can use variables, the DOM, to store state, and in CSS, we can use pseudo-class selectors to store state, and that’s the heart of what CSS is all about.

Core concept: Save state.

Tips on CSS in the previous article: Hover +: Active (); hover+:active (); hover+:active ()

If you’re familiar with these two attributes, we actually use them a lot on the A tag

LVHA order: : Link — :visited — :hover — :active

Effect:

Example source code, online examples

The sample

Because the author could not find a job, fell into autism and lacked creative passion, so this link was skipped…

Skills that

Hover triggers when hidden child elements are displayed; When active fires, the child elements change as required.

Code reading

1. Basic layout

Because exhibitive things need to be vertically centered, I used Vue props to solidify the vertically centered style:

<Layout-Layout
  align-center
  justify-center
  :background-color="bgColor"
>
  hello flex item
</Layout-Layout>
Copy the code

To make it easier to demonstrate, please welcome three brothers who are different in size and height:

<div class="flex__item">The eldest brother</div>
<div class="flex__item">Two younger brother</div>
<div class="flex__item">Three younger sister</div>
Copy the code

Style them and add pseudo-elements:

<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 // indigo &::after position absolute Padding 10px 6px border-radius 6px color #e0c8d1 </style>Copy the code

Check out the results:

2. :hover

The basic layout is complete, followed by the hover effect. When the mouse hovers, two pseudo-elements will be displayed, one up and one down:

.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
Copy the code

View the effect:

3. :active

As far as I can remember, :active was valid for any element, failed on the pseudo-element, and then went to look at MDN:

Perhaps the pseudo-element is one with the element itself? Or do you want to select the parent element (clue: :focus-within)? I’ll leave that for later. FLag plus one. There are alternatives (camouflage), sacrifice the lead brother:

.flex__item
  &:nth-child(1)
    width 20%
    height 20%
    &::after
      position absolute
      content 'Last Stand'
      padding 10px 6px
      border-radius 6px
      color #e0c8d1/ / light bluebackground-color #1661ab/ / indigotransition all 0.5 s linear
      opacity 0
  &:nth-child(2)
    width 16%
    height 18%
    &::before
      position absolute
      content 'One man leads to enlightenment'
      padding 10px 6px
      border-radius 6px
      color #e0c8d1/ / light bluebackground-color #1661ab/ / indigotransition all 0.5 s linear
      opacity 0
  &:nth-child(3)
    width 14%
    height 28%
    &::before
      position absolute
      content 'One man leads to enlightenment'
      padding 10px 6px
      border-radius 6px
      color #e0c8d1/ / light bluebackground-color #1661ab/ / indigotransition all 0.5 s linear
      opacity 0
Copy the code

View the effect:

Add :active effect for pseudo class:

.flex__item:active::before, .flex__item:active::after color #f1908c // backbackground # FFF box-shadow 0 2px 4px rgba(0, 0, 0,.5), 2px 0 4px rgba(0, 0, 0, .6)Copy the code

View the effect:

4. align-self

Add a different align-self value to the child element:

.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
Copy the code

The final result is as shown in the introduction.

The last

There are many properties of CSS that we may not understand the effect of, but I think it is a good way to use CSS to explain CSS.

The resources

  1. MDN
  2. The color of China