前言
在之前某一個前端技術群裡,有一個群友說他面試的時候遇到了一個問題,就是面試官讓他用純 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學院 的文章