面試官：你能夠用純 CSS 判斷鼠標進入的方向嗎？

時間 2020-05-09

原文原文鏈接

做者：陳大魚頭

github： KRISACHAN

前言

在以前某一個前端技術羣裏，有一個羣友說他面試的時候遇到了一個問題，就是面試官讓他用純 CSS 來實現一個根據鼠標移動位置以爲物體移動方向的 DEMO。css

給出的初始結構以下：html

<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">從不一樣方向使鼠標指針移過下面的內容</p>
<p>↓</p>
<span>→ </span>
<div class="block">
    <div class="block_content">
        Hover me!
    </div>
</div>
<span> ←</span>
<p>↑</p>
複製代碼

效果圖以下：前端

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef086e3ebc2?w=445&h=363&f=png&s=5549

實現

~~淨會問這種不實用又跟業務沒啥關係的問題，氣抖冷，中國前端何時才能真正的站起來。~~git

謝謝面試官提出的好問題，我會努力實現出來的。github

因此這個功能真的能用純 CSS 實現嗎？面試

答案是能夠的，首先咱們來分解下思路。微信

CSS 鼠標事件

首先根據題幹，咱們知道這題是須要用到鼠標操做的，JS 裏咱們有各類mouse事件，但一樣的，CSS 咱們也有:hover。ui

這題咱們須要利用到的選擇器就是:hover了spa

判斷方向

判斷方向 的功能即是本題的核心。指針

從題圖上來看，其實已經給了咱們方向的指引，就是告訴咱們鼠標要經過四個箭頭的方向進入。

而後就是若是要純 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>
複製代碼

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef087b7e7bc?w=477&h=410&f=png&s=5449

咱們能夠發現，除了右塊以外，都被遮住了，嗯，正常現象。

接下來咱們只須要讓這幾個塊退到邊緣便可。

代碼以下：

.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%;
}
複製代碼

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef05356773b?w=559&h=480&f=png&s=7453

而後咱們加上過渡：

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

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef06190ecb4?w=650&h=523&f=gif&s=40417

一步就是隱藏起來：

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

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef060c91258?w=650&h=523&f=gif&s=36139

因此咱們有完整代碼以下：

<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>
複製代碼