天蚕土豆,辰东全部小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

面試官：你可以用純CSS判斷鼠標(biāo)進(jìn)入的方向嗎？

前言

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

在之前某一個(gè)前端技術(shù)群里，有一個(gè)群友說(shuō)他面試的時(shí)候遇到了一個(gè)問(wèn)題，就是面試官讓他用純 CSS 來(lái)實(shí)現(xiàn)一個(gè)根據(jù)鼠標(biāo)移動(dòng)位置覺(jué)得物體移動(dòng)方向的 DEMO。

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

 
 
 
 
  
  
  
   
  
  
  
  從不同方向使鼠標(biāo)指針移過(guò)下面的內(nèi)容
 
  
  
  
  ↓
 
  
  
  
  →  
  
  
  
   
  
  
  
       
  
  
  
          Hover me!

←

↑

效果圖如下：

實(shí)現(xiàn)

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

謝謝面試官提出的好問(wèn)題，我會(huì)努力實(shí)現(xiàn)出來(lái)的。

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

答案是可以的，首先我們來(lái)分解下思路。

CSS 鼠標(biāo)事件

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

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

判斷方向

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

從題圖上來(lái)看，其實(shí)已經(jīng)給了我們方向的指引，就是告訴我們鼠標(biāo)要通過(guò)四個(gè)箭頭的方向進(jìn)入。

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

這就是題目給出的兩個(gè)隱藏條件。

所以我們來(lái)嘗試下實(shí)現(xiàn)。

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

上

下

左

右

Hover me!

效果如下：

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

接下來(lái)我們只需要讓這幾個(gè)塊退到邊緣即可。

代碼如下：

 
 
 
 
  
  
  
  .block_hoverer { 
  
  
  
    position: absolute; 
  
  
  
    z-index: 1; 
  
  
  
    width: 100%; 
  
  
  
    height: 100%; 
  
  
  
    transition: all 0.3s ease; 
  
  
  
  } 
  
  
  
  .block_hoverer:nth-child(1) { 
  
  
  
    background: red; 
  
  
  
    top: -90%; 
  
  
  
  } 
  
  
  
  .block_hoverer:nth-child(2) { 
  
  
  
    background: lime; 
  
  
  
    top: 90%; 
  
  
  
  } 
  
  
  
  .block_hoverer:nth-child(3) { 
  
  
  
    background: orange; 
  
  
  
    left: -90%; 
  
  
  
  } 
  
  
  
  .block_hoverer:nth-child(4) { 
  
  
  
    background: blue; 
  
  
  
    left: 90%; 
  
  
  
  }

效果如下：

然后我們加上過(guò)渡：

 
 
 
 
  
  
  
  .block_hoverer { 
  
  
  
    transition: all 0.3s ease; 
  
  
  
  } 
  
  
  
  .block_hoverer:hover { 
  
  
  
    opacity: 1; 
  
  
  
    top: 0; 
  
  
  
    left: 0; 
  
  
  
  }

效果如下：

最后一步就是隱藏起來(lái)：

 
 
 
 
  
  
  
  .block { 
  
  
  
    position: relative; 
  
  
  
    display: inline-block; 
  
  
  
    overflow: hidden; 
  
  
  
    width: 10em; 
  
  
  
    height: 10em; 
  
  
  
    vertical-align: middle; 
  
  
  
  } 
  
  
  
  .block_hoverer { 
  
  
  
    opacity: 0; 
  
  
  
  } 
  
  
  
  .block_hoverer:hover { 
  
  
  
    opacity: 1; 
  
  
  
  }

效果如下：

完整效果

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

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
      從不同方向使鼠標(biāo)指針移過(guò)下面的內(nèi)容
 
  
  
  
      ↓
 
  
  
  
      →  
  
  
  
       
  
  
  
          1

新聞中心

其他資訊