前言

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

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

<style>  
body {  
    padding: 2em;  
    text-align: center;  
}  
.block {  
    position: relative;  
    display: inline-block;  
    width: 10em;  
    height: 10em;  
    vertical-align: middle;  
}  
.block_content {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    text-align: center;  
    line-height: 10em;  
    background: #333;  
    color: #FFF;  
}  
</style>  
<p class="text">從不同方向使鼠標(biāo)指針移過下面的內(nèi)容</p>  
<p>↓</p>  
<span>→ </span>  
<div class="block">  
    <div class="block_content">  
        Hover me!  
    </div>  
</div>  
<span> ←</span>  
<p>↑</p> 

效果圖如下：

實現(xiàn)

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

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

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

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

CSS 鼠標(biāo)事件

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

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

判斷方向

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

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

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

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

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

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

<style>  
.block_hoverer {  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    z-index: 1;  
}  
.block_hoverer:nth-child(1) {  
    background: red;  
}  
.block_hoverer:nth-child(2) {  
    background: lime;  
}  
.block_hoverer:nth-child(3) {  
    background: orange;  
}  
.block_hoverer:nth-child(4) {  
    background: blue;  
}  
</style>  
<div class="block">  
    <div class="block_hoverer">上</div>  
    <div class="block_hoverer">下</div>  
    <div class="block_hoverer">左</div>  
    <div class="block_hoverer">右</div>  
    <div class="block_content">  
        Hover me! 
     </div>  
</div> 

效果如下：

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

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

代碼如下： 

.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%;  
} 

效果如下：

然后我們加上過渡： 

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

效果如下：

最后一步就是隱藏起來： 

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

效果如下：

完整效果

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

<style>  
    body {  
        padding: 2em;  
        text-align: center;  
    }  
    .block {  
        position: relative;  
        display: inline-block;  
        overflow:hidden;  
        width: 10em;  
        height: 10em;  
        vertical-align: middle;  
        transform: translateZ(0);  
    }  
    .block_hoverer {  
        position: absolute;  
        z-index: 1;  
        width: 100%;  
        height: 100%;  
        opacity: 0;  
        transition: all .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%;  
    }  
    .block_hoverer:hover {  
        opacity: 1;  
        top: 0;  
        left: 0;  
    }  
    .block_content {  
        position: absolute;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        text-align: center;  
        line-height: 10em;  
        background: #333;  
        color: #FFF;  
    }  
</style>  
<body>  
    <p class="text">從不同方向使鼠標(biāo)指針移過下面的內(nèi)容</p>  
    <p>↓</p>  
    <span>→ </span>  
    <div class="block">  
        <div class="block_hoverer">1</div>  
        <div class="block_hoverer">2</div>  
        <div class="block_hoverer">3</div>  
        <div class="block_hoverer">4</div>  
        <div class="block_content">  
            Hover me!  
        </div>  
    </div>  
    <span> ←</span>  
    <p>↑</p>  
</body> 

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

雖然沒什么軟用，但是應(yīng)付面試官應(yīng)該是夠用了。

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