溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用純CSS判斷鼠標(biāo)進(jìn)入的方向”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用純CSS判斷鼠標(biāo)進(jì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>↓</p>
<span>→ </span>
<div class="block">
<div class="block_content">
Hover me!
</div>
</div>
<span> ←</span>
<p>↑</p>
效果圖如下：
凈會(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)分解下思路。
首先根據(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>↓</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>
感謝各位的閱讀，以上就是“怎么用純CSS判斷鼠標(biāo)進(jìn)入的方向”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用純CSS判斷鼠標(biāo)進(jìn)入的方向這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼