CSS如何判斷鼠標(biāo)進(jìn)入的方向

這篇文章給大家分享的是有關(guān)CSS如何判斷鼠標(biāo)進(jìn)入的方向的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

在之前某一個(gè)前端技術(shù)群里，有一個(gè)群友說(shuō)他面試的時(shí)候遇到了一個(gè)問(wèn)題，就是面試官讓他用純 CSS 來(lái)實(shí)現(xiàn)一個(gè)根據(jù)鼠標(biāo)移動(dòng)位置覺(jué)得物體移動(dòng)方向的 DEMO。

給出的初始結(jié)構(gòu)如下：

<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">從不同方向使鼠標(biāo)指針移過(guò)下面的內(nèi)容</p>
<p>&darr;</p>
<span>&rarr; </span>
<div class="block">
    <div class="block_content">
        Hover me!
    </div>
</div>
<span> &larr;</span>
<p>&uarr;</p>

效果圖如下：

實(shí)現(xiàn)

凈會(huì)問(wèn)這種不實(shí)用又跟業(yè)務(wù)沒(méi)啥關(guān)系的問(wèn)題，氣抖冷，中國(guó)前端什么時(shí)候才能真正的站起來(lái)。 謝謝面試官提出的好問(wèn)題，我會(huì)努力實(shí)現(xiàn)出來(lái)的。

所以這個(gè)功能真的能用純 CSS 實(shí)現(xiàn)嗎？

答案是可以的，首先我們來(lái)分解下思路。

CSS 鼠標(biāo)事件

首先根據(jù)題干，我們知道這題是需要用到鼠標(biāo)操作的，JS 里我們有各種 mouse 事件，但同樣的，CSS 我們也有 :hover 。

這題我們需要利用到的選擇器就是 :hover 了

判斷方向

判斷方向的功能便是本題的核心。

從題圖上來(lái)看，其實(shí)已經(jīng)給了我們方向的指引，就是告訴我們鼠標(biāo)要通過(guò)四個(gè)箭頭的方向進(jìn)入。

然后就是如果要純 CSS 來(lái)實(shí)現(xiàn)，就是我們的鼠標(biāo)必須要觸碰到某個(gè)關(guān)鍵節(jié)點(diǎn)，而且這個(gè)節(jié)點(diǎn)的某個(gè)表現(xiàn)一定是可以代表這個(gè)方位的。

這就是題目給出的兩個(gè)隱藏條件。

所以我們來(lái)嘗試下實(shí)現(xiàn)。

首先要通過(guò) :hover 來(lái)觸碰到這個(gè)關(guān)鍵節(jié)點(diǎn)，而且是要在箭頭指向的方向下觸碰觸發(fā)，那么我們可以在箭頭所指的方向都加上一個(gè)能被觸碰到的物體，例如這樣：

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

效果如下：

我們可以發(fā)現(xiàn)，除了 右塊 之外，都被遮住了，嗯，正?，F(xiàn)象。

接下來(lái)我們只需要讓這幾個(gè)塊退到邊緣即可。

代碼如下：

.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%;
}

效果如下：

然后我們加上過(guò)渡：

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

效果如下：

一步就是隱藏起來(lái)：

.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">從不同方向使鼠標(biāo)指針移過(guò)下面的內(nèi)容</p>
    <p>&darr;</p>
    <span>&rarr; </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> &larr;</span>
    <p>&uarr;</p>
</body>

完整效果可以查看魚(yú)頭的codepen

感謝各位的閱讀！關(guān)于“CSS如何判斷鼠標(biāo)進(jìn)入的方向”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！