日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
面試官：你可以用純CSS判斷鼠標進入的方向嗎？

前言

寧國網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

在之前某一個前端技術(shù)群里，有一個群友說他面試的時候遇到了一個問題，就是面試官讓他用純 CSS 來實現(xiàn)一個根據(jù)鼠標移動位置覺得物體移動方向的 DEMO。

給出的初始結(jié)構(gòu)如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. 從不同方向使鼠標指針移過下面的內(nèi)容
     
    3. 
  
  
  
  
  3. ↓
     
    4. 
  
  
  
  
  4. →  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.         Hover me! 
    8. 
  
  
  
  
  8.     
 
  •  
  •  ← 

  • ↑

    • 效果圖如下：

    實現(xiàn)

    凈會問這種不實用又跟業(yè)務(wù)沒啥關(guān)系的問題，氣抖冷，中國前端什么時候才能真正的站起來。

    謝謝面試官提出的好問題，我會努力實現(xiàn)出來的。

    所以這個功能真的能用純 CSS 實現(xiàn)嗎？

    答案是可以的，首先我們來分解下思路。

    CSS 鼠標事件

    首先根據(jù)題干，我們知道這題是需要用到鼠標操作的，JS 里我們有各種mouse事件，但同樣的，CSS 我們也有:hover。

    這題我們需要利用到的選擇器就是:hover了

    判斷方向

    判斷方向 的功能便是本題的核心。

    從題圖上來看，其實已經(jīng)給了我們方向的指引，就是告訴我們鼠標要通過四個箭頭的方向進入。

    然后就是如果要純 CSS 來實現(xiàn)，就是我們的鼠標必須要觸碰到某個關(guān)鍵節(jié)點，而且這個節(jié)點的某個表現(xiàn)一定是可以代表這個方位的。

    這就是題目給出的兩個隱藏條件。

    所以我們來嘗試下實現(xiàn)。

    首先要通過:hover來觸碰到這個關(guān)鍵節(jié)點，而且是要在箭頭指向的方向下觸碰觸發(fā)，那么我們可以在箭頭所指的方向都加上一個能被觸碰到的物體，例如這樣：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     上
     
  •     下
    •  
  •     左
    •  
  •     右
    •  
  •      
  •         Hover me!
  •      
    •  

  • 效果如下：

    我們可以發(fā)現(xiàn)，除了 右塊 之外，都被遮住了，嗯，正?，F(xiàn)象。

    接下來我們只需要讓這幾個塊退到邊緣即可。

    代碼如下：

     
 
 
 
      
  
  
  
  
    1. .block_hoverer { 
      2. 
  
  
  
  
    2.   position: absolute; 
      3. 
  
  
  
  
    3.   z-index: 1; 
      4. 
  
  
  
  
    4.   width: 100%; 
      5. 
  
  
  
  
    5.   height: 100%; 
      6. 
  
  
  
  
    6.   transition: all 0.3s ease; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. .block_hoverer:nth-child(1) { 
      9. 
  
  
  
  
    9.   background: red; 
      10. 
  
  
  
  
    10.   top: -90%; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .block_hoverer:nth-child(2) { 
      13. 
  
  
  
  
    13.   background: lime; 
      14. 
  
  
  
  
    14.   top: 90%; 
      15. 
  
  
  
  
    15. } 
      16. 
  
  
  
  
    16. .block_hoverer:nth-child(3) { 
      17. 
  
  
  
  
    17.   background: orange; 
      18. 
  
  
  
  
    18.   left: -90%; 
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20. .block_hoverer:nth-child(4) { 
      21. 
  
  
  
  
    21.   background: blue; 
      22. 
  
  
  
  
    22.   left: 90%; 
      23. 
  
  
  
  
    23. }
      24.

    效果如下：

    然后我們加上過渡：

     
 
 
 
      
  
  
  
  
    1. .block_hoverer { 
      2. 
  
  
  
  
    2.   transition: all 0.3s ease; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .block_hoverer:hover { 
      5. 
  
  
  
  
    5.   opacity: 1; 
      6. 
  
  
  
  
    6.   top: 0; 
      7. 
  
  
  
  
    7.   left: 0; 
      8. 
  
  
  
  
    8. }
      9.

    效果如下：

    最后一步就是隱藏起來：

     
 
 
 
      
  
  
  
  
    1. .block { 
      2. 
  
  
  
  
    2.   position: relative; 
      3. 
  
  
  
  
    3.   display: inline-block; 
      4. 
  
  
  
  
    4.   overflow: hidden; 
      5. 
  
  
  
  
    5.   width: 10em; 
      6. 
  
  
  
  
    6.   height: 10em; 
      7. 
  
  
  
  
    7.   vertical-align: middle; 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9. .block_hoverer { 
      10. 
  
  
  
  
    10.   opacity: 0; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .block_hoverer:hover { 
      13. 
  
  
  
  
    13.   opacity: 1; 
      14. 
  
  
  
  
    14. }
      15.

    效果如下：

    完整效果

    所以我們有完整代碼如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     從不同方向使鼠標指針移過下面的內(nèi)容
       
      4. 
  
  
  
  
    4.     
      ↓
       
      5. 
  
  
  
  
    5.     →  
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.         1
     
  •         2
    •  
  •         3
    •  
  •         4
    •  
  •          
  •             Hover me! 
  •          
  •      
  •      ← 
  •     

    ↑

     

  • 完整效果可以查看魚頭的codepen[2

    雖然沒什么軟用，但是應付面試官應該是夠用了。

    感謝面試官提出的問題，讓我實現(xiàn)了這個功能，對 CSS 有了更深的理解。


    本文題目：面試官：你可以用純CSS判斷鼠標進入的方向嗎？
    鏈接地址：http://www.dlmjj.cn/article/dppdipc.html

    其他資訊