面試官:你可以用純 CSS 判斷鼠標進入的方向嗎?

前言

在之前某一個前端技術羣裏,有一個羣友說他面試的時候遇到了一個問題,就是面試官讓他用純 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 class="text">從不同方向使鼠標指針移過下面的內容</p>
<p></p>
<span></span>
<div class="block">
    <div class="block_content">
        Hover me!
    </div>
</div>
<span></span>
<p></p>

效果圖如下:

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/pure-css-direction/1.png

實現

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

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

所以這個功能真的能用純 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>

效果如下:

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/pure-css-direction/2.png

我們可以發現,除了 右塊 之外,都被遮住了,嗯,正常現象。

接下來我們只需要讓這幾個塊退到邊緣即可。

代碼如下:

.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://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/pure-css-direction/3.png

然後我們加上過渡:

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

效果如下:

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/pure-css-direction/4.gif

一步就是隱藏起來:

.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://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/pure-css-direction/5.gif

所以我們有完整代碼如下:

<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>

完整效果可以查看魚頭的codepen

雖然沒什麼軟用,但是應付面試官應該是夠用了。

感謝面試官提出的問題,讓我實現了這個功能,對 CSS 有了更深的理解。

後記

如果你喜歡探討技術,或者對本文有任何的意見或建議,非常歡迎加魚頭微信好友一起探討,當然,魚頭也非常希望能跟你一起聊生活,聊愛好,談天說地。
魚頭的微信號是:krisChans95
也可以掃碼添加好友,備註“csdn”就行
https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/wx-qrcode1.jpg

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章