（給程式設計師零距離加星標，零距離了解項目開發.）
•作者：陳大魚頭
•github： KRISACHAN[1]
前言在之前某一個前端技術群裡，有一個群友說他面試的時候遇到了一個問題，就是面試官讓他用純 CSS 來實現一個根據滑鼠移動位置覺得物體移動方向的 DEMO。
給出的初始結構如下：
<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>從不同方向使滑鼠指針移過下面的內容</p><p>↓</p><span>→ </span><div> <div> Hover me! </div></div><span> ←</span><p>↑</p>效果圖如下：
實現淨會問這種不實用又跟業務沒啥關係的問題，氣抖冷，中國前端什麼時候才能真正的站起來。
謝謝面試官提出的好問題，我會努力實現出來的。
所以這個功能真的能用純 CSS 實現嗎？
答案是可以的，首先我們來分解下思路。
CSS 滑鼠事件首先根據題幹，我們知道這題是需要用到滑鼠操作的，JS 裡我們有各種mouse事件，但同樣的，CSS 我們也有:hover。
這題我們需要利用到的選擇器就是:hover了
判斷方向判斷方向 的功能便是本題的核心。
從題圖上來看，其實已經給了我們方向的指引，就是告訴我們滑鼠要通過四個箭頭的方向進入。
然後就是如果要純 CSS 來實現，就是我們的滑鼠必須要觸碰到某個關鍵節點，而且這個節點的某個表現一定是可以代表這個方位的。
這就是題目給出的兩個隱藏條件。
所以我們來嘗試下實現。
首先要通過:hover來觸碰到這個關鍵節點，而且是要在箭頭指向的方向下觸碰觸發，那麼我們可以在箭頭所指的方向都加上一個能被觸碰到的物體，例如這樣：
<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> <div>上</div> <div>下</div> <div>左</div> <div>右</div> <div> Hover me! </div></div>效果如下：
我們可以發現，除了 右塊 之外，都被遮住了，嗯，正常現象。
接下來我們只需要讓這幾個塊退到邊緣即可。
代碼如下：
.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>從不同方向使滑鼠指針移過下面的內容</p> <p>↓</p> <span>→ </span> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div> Hover me! </div> </div> <span> ←</span> <p>↑</p></body>完整效果可以查看魚頭的codepen[2]
雖然沒什麼軟用，但是應付面試官應該是夠用了。
感謝面試官提出的問題，讓我實現了這個功能，對 CSS 有了更深的理解。
References[1] KRISACHAN: https://github.com/KRISACHAN
[2] codepen: https://codepen.io/krischan77/pen/RzomRX
👇👇👇👇👇
今天給大家送上一份特別心意。
僅限公眾號【程式設計師零距離】粉絲參與，在公眾號後臺對話框回復關鍵詞：福利，獲取抽獎入口。
看看小編為大家都準備了什麼？
一等獎：66元現金紅包1個 10份二等獎：優選書籍1本 8份