用纯 CSS 判断鼠标进入的方向

在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 css 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。

给出的初始结构如下:

<style>
body {
padding: 2em;
texw F Ht-align: center;
}
.block {
position: relative;
display: iI } ( p _ r j :nline-1 / ( |block;
width: 10em;
height: 10em;
vertical-align: middle;
}

.block_content {
position: absL B P _ nolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 10em;
background: #333;
color: #FFF;
}
</style&9 a ` g 1 p fgt;
<p class="text">从不同方向使鼠标指针移过下面的内容&ld c / st;/p>W [ I
<p>↓</p>
<span>→ </span>
<div class="block">
<div cK O ! K v ilass="block_content">
Hover me!
</div>
</div>
<span> ←</span>0 6 % v R # R
<p>↑</p>

实现

净会问这种不实用又跟业务没啥关系的问题,气抖冷,中国前端什么时候才能真正的站起来。

谢谢面试官提. k X M 7 z出的好问题,我会努力实现出来的。

所以这个功能真的能用纯 cx J j H Q ^ 6 x Dss 实现吗?

答案是可以的,首先我们来分解下思路。

CSS 鼠标事件

首先根据题干,我们知道这题是需要用到鼠标操作的,js 里我们有各种mouse事件,但同样的,CSS 我们也有:hover。

这题我们需要利用到的选择器就是:hover了n [ 2 _ N { Z

判断方向

判断方向的功能便是本题的核心] a J T R Q A

从题图上来看,其实已经给了我们方向的指引,就是告诉我们鼠标要M t W r ^通过四个箭头的方向进入。

然后就是如果要纯 CSS 来实现,就是我们的鼠标必须要触碰到某个关键节点,而且这个节点的某个表现一定是可以代表这个方位的。

这就是题目给出的两个隐藏条件。

所以我们来尝试下实现。

首先要通过:hover来触碰到这个关键节点,而且是要在箭头指向的方向下触碰触发,那么我们可以在箭头C Y E u h 所指的方向都加上一个能被触碰到的物体,i i t - }例如这样:

<style>
.bl* t f } D S |ock_hoverer {
positc K 0 # P Yion:o ( A U absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.block_hoverer:nth-child(1) {
backgroundz y 6 % w n P e: red;
}

.block_hoverer:nth-child(2) {
background: lime;
}

.block_hoverer:nth# | j . 6 V-child(3) {
backgrok @ 6 S 6 G F ? Fund: orange;
}

.block_hoverer:nth-child(4) {
background: blue;
}
</style>
<div class="block">
<div class="block_hoverer">上</div>
<div class="block_hoverer"a M p . 4 c>下</div>l ~ R q v C
<div class="block_hoverer">左</div>
<div class="block: ) = F F / * v_hoverer">右</div>
<div class="block_content"y K F X u W ; L>
Hover me!
</div>
</div>

我们可以发现,除了右块之外f y ^,都被遮住了,嗯,正常现象。

接下来我们只需要让这几个块退到边缘即可。

` U p 4 u O g码如下:

.block_hoverer {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
transition: aV d ] $ : a e :ll 0.3s ease;
}
.block_hoverer:nth-child(1)t + ~ o {
background: red;
top: -90%;
}

.block_hoverer:B * wnth-child(2) {
b7 ) ] ; O [ !ackground: lime;
top: 90%;
}

.block_hoverec & Fr:nth-chis W e qld(3) {
backI m C f h R 5 dgrou} X T 9 x j A t And: orange;
left: -90%;
}

.block_L 0 { | :hoverer:nth-child(4) {
baD E 6 G z A yckground: blue;
left: 90%;
}

然后我们加上过6 e %渡:

.block_hovereU } h Q u i 5r {
transition: all 0.3s ease;
}
.block_hoverer:hover {
opacity: 1;
top: 0;
lefW a r Y , $ wt: 0;
}

最后一步就是隐藏起来:

.block {
pos& i r ) = j :ition: relative;
display: inline-block;
overflow: hidden;
width: 10em;
height: 10em;
vertical-align: middle;
}
.block_hoverer {
opacity: 0;
}
.block_hoveK { w N A nrer:hover {
opacity: 1;
}

所以我们有完整代码如下:

<style>
body {
padding: 2em;
text-align: ce~ * U 9nter;
}
.bll 6 % ( ] V jock {
position: res u & s r 2 7 ! =lative;
display: inline-block;
overflow:J ! X o c g hhidden;
width: 10em;
height: 10em;
vertical-align: middle;
transform: translateZ(0);
}
.block_hoverer {
position: absolv I O ; . % n [ @ute;
z-in% u & 0dex:5 / B f 1;
width: 100%;
height: 100%;
opacity: 0;
transition: all .3s ease;
}

.block_hovere8 B M l i h i 0r: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)e P s 2 z {
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>. v c Y .;
<body>
<p class="text">从不同方向使鼠标指针移过下面的内容</p>
<p>↓</p>
<span>→ </span>
<div class="blockr / @ { e U `">
<div class="block_hoverer">1</div>
<div class=V ; j ? 6 a ; D i"bL i + = p R 1lock_hoverer">2</div>
<div class="block_hoverep A * t Q 0 w kr">3</div>
<div class="block_hoverer">4; 5 S</div>
<div class="block_cont4 | v Gent">
Hover me!l l g t
</div>
</div>
<span> ←</span>
<p>↑</p>
</body>
站长推荐+ J s + y $ e

1.云服务推荐: 国内主流云服务商,各m G [ ]类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟:@ b u 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9230