用純 CSS 判斷滑鼠進入的方向
阿新 • • 發佈：2020-09-11
在之前某一個前端技術群裡，有一個群友說他面試的時候遇到了一個問題，就是面試官讓他用純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;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 10em;
background: #333;
color: #FFF;
}
</style>
<p class="text">從不同方向使滑鼠指標移過下面的內容</p>
<p>↓</p>
<span>→ </span>
<div class="block">
<div class="block_content">
</div>
</div>
<span> ←</span>
<p>↑</p>廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
實現
淨會問這種不實用又跟業務沒啥關係的問題，氣抖冷，中國前端什麼時候才能真正的站起來。
謝謝面試官提出的好問題，我會努力實現出來的。
所以這個功能真的能用純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 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>我們可以發現，除了右塊之外，都被遮住了，嗯，正常現象。
接下來我們只需要讓這幾個塊退到邊緣即可。
程式碼如下：
.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">從不同方向使滑鼠指標移過下面的內容</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>