国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 搞事技巧：hover+active

cangck_X / 651人閱讀

摘要：核心概念保存狀態(tài)。在上一篇搞事技巧中利用來加深了解了的彈性容器屬性，這一節(jié)是要利用來了解的彈性項目屬性。最后很多屬性我們可能難以理解其效果，個人認為運用來解釋不失為一種良好的方式。

介紹

在 JavaScript 中，我們可以利用變量，DOM 來保存狀態(tài)，而 CSS 當中，我們也可以利用偽類選擇器來保存狀態(tài)，這就是 CSS 搞事的核心了。

核心概念：保存狀態(tài)。

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

這兩個屬性你有沒有很熟悉呢，其實我們經(jīng)常在 a 標簽上使用它們

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

效果圖：

示例源碼、在線示例

示例

由于作者找不到工作，陷入自閉缺乏創(chuàng)作激情，所以這一個環(huán)節(jié)就略過……

技巧說明

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

代碼解讀 1. 基礎(chǔ)布局

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


  hello flex item

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

大哥


二弟


三妹

為它們增加樣式，并添加偽元素：

查看一下效果：

2. :hover

基礎(chǔ)布局完成，接著是添加 :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 是對任何元素都生效的，結(jié)果偽元素上設(shè)置失敗了，然后就去看了下 MDN：

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

.flex__item
  &:nth-child(1)
    width 20%
    height 20%
    &::after
      position absolute
      content "背水一戰(zhàn)"
      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

最后結(jié)果就如介紹中所示了。

最后

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

參考資料

MDN

中國色

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116045.html

相關(guān)文章

  • CSS 搞事技巧：border+transparent

    摘要：默認盒模型的正方形在上方已經(jīng)說明了，正方形的被擠壓為時就會得到三角形的效果。這里選擇一種較為取巧的形式，因為這邊使用的是行內(nèi)樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵 介紹 出門忘帶電源線，快遞到了終于可以繼續(xù)水文章了。好不容易獲得一個面試機會，面試官很 Nice，可惜的是當時處于懵逼狀態(tài)，錯過了大好的機會： 面試官：巴拉巴拉吧…… 我：嗯，啊，這個，...

    nifhlheimr 評論0 收藏0

  • 重溫 Flex 布局

    摘要：而通過實現(xiàn)則簡單多了源碼原因解釋中間一欄為核心，所以需要優(yōu)先渲染，結(jié)構(gòu)也就放在了前面，主要是使用屬性將放置到前方。源碼的列數(shù)每列的個數(shù)函數(shù)原因解釋實現(xiàn)瀑布流還是比較簡單的。 介紹 這是關(guān)于 Flex 布局的實踐，原想還水一點字數(shù)來介紹 Flex 相關(guān)屬性，想想還是算了，阮一峰大佬的兩篇文章推上： Flex 布局教程：語法篇 Flex 布局教程：實例篇 如何用 CSS 來增進對 Fl...

    binta 評論0 收藏0

  • CSS 搞事技巧：checkbox+label+selector

    摘要：列出這個兩個屬性的常用值看可知已經(jīng)增加了更多的值代碼解讀該項目是通過來渲染的，所以會使用到的語法，不過此處僅使用的循環(huán)來解決重復(fù)書寫的問題該效果參考來源。接著使用布局來將它們分割，因為這次主要將的不是，所以就不進行闡述了。 介紹 其實這篇文章寫到一大半時它的名字還叫做 《重溫 Flex 布局》，結(jié)果寫著寫著就走了心，附上一圖表示心情吧： showImg(https://segmentf...

    alphahans 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<