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

本篇內(nèi)容主要講解“如何用純CSS判斷鼠標(biāo)進(jìn)入的方向”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何用純CSS判斷鼠標(biāo)進(jìn)入的方向”吧!

　　面試的時(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)，除了 右塊 之外，都被遮住了，嗯，正常現(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>

到此，相信大家對(duì)“如何用純CSS判斷鼠標(biāo)進(jìn)入的方向”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！