前言
在之前某一個前端技術群裡，有一個群友說他面試的時候遇到了一個問題，就是面試官讓他用純 CSS 來實現一個根據鼠標移動位置覺得物體移動方向的 DEMO。
給出的初始結構如下：
<code>從不同方向使鼠標指針移過下面的內容
↓
→
Hover me!
←↑
/<code>
效果圖如下：
實現
淨會問這種不實用又跟業務沒啥關係的問題，氣抖冷，中國前端什麼時候才能真正的站起來。
謝謝面試官提出的好問題，我會努力實現出來的。
所以這個功能真的能用純 CSS 實現嗎？
答案是可以的，首先我們來分解下思路。
CSS 鼠標事件
首先根據題幹，我們知道這題是需要用到鼠標操作的，JS 裡我們有各種mouse事件，但同樣的，CSS 我們也有:hover。
這題我們需要利用到的選擇器就是:hover了
判斷方向
判斷方向 的功能便是本題的核心。
從題圖上來看，其實已經給了我們方向的指引，就是告訴我們鼠標要通過四個箭頭的方向進入。
然後就是如果要純 CSS 來實現，就是我們的鼠標必須要觸碰到某個關鍵節點，而且這個節點的某個表現一定是可以代表這個方位的。
這就是題目給出的兩個隱藏條件。
所以我們來嘗試下實現。
首先要通過:hover來觸碰到這個關鍵節點，而且是要在箭頭指向的方向下觸碰觸發，那麼我們可以在箭頭所指的方向都加上一個能被觸碰到的物體，例如這樣：
<code>上下左右
Hover me!
/<code>
效果如下：
我們可以發現，除了 右塊 之外，都被遮住了，嗯，正常現象。
接下來我們只需要讓這幾個塊退到邊緣即可。
代碼如下：
<code>
.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%;
}
/<code>
效果如下：
然後我們加上過渡：
<code>
.block_hoverer {
transition: all 0.3s ease;
}
.block_hoverer:hover {
opacity: 1;
top: 0;
left: 0;
}
/<code>
效果如下：
一步就是隱藏起來：
<code>
.block {
position: relative;
display: inline-block;
overflow: hidden;
width: 10em;
height: 10em;
vertical-align: middle;
}
.block_hoverer {
opacity: 0;
}
.block_hoverer:hover {
opacity: 1;
}
/<code>
效果如下：
所以我們有完整代碼如下：
<code>從不同方向使鼠標指針移過下面的內容
↓
→1234
Hover me!
←↑
/<code>
雖然沒什麼軟用，但是對付面試官應該是夠用了。
感謝面試官提出的問題，讓我實現了這個功能，對 CSS 有了更深的理解。
分享到:
閱讀更多 千鋒python學院 的文章
