面试官:你可以用纯 CSS 判断鼠标进入的方向吗?


  • 作者:陈大鱼头
  • github: KRISACHAN

前语

在之前某一个前端技能群里,有一个群友说他面试的时分遇到了一个问题,便是面试官让他用纯 CSS 来完成一个根据鼠标移动方位觉得. V 8 z S )物体移动方向的 DEMO。

给出的初始结构如下:

<style>
body {
padding: 2em;
text-align: centerZ @ O;
}
.block {
position: relative;
display: inline-block;
width: 10em;
height: 10em;
vertical-align: middle;
}
.block_content {
position: abso+ | H W F D e M Olute;
tol v F ; X q Vp: 0;
left: 0;
width: 100%;
height:- q 4 x @ 5 100%;
text-align: center;
line-height: 10em;
background: #333;
color: #FFF;
}
</stC d g p t q g D nyle>
<p class="text">从不同方向使鼠标指针移过下面的# a # ~ o z _ 内容</p>
<p></p( R @ W D W C i>
<span></span>
<div class="0 - u + e C Fblock">
<div class="block_content">
Hover mY q E G ` *e!` k 6 y 2 U .
</div>
</div>
<span></span>
<p&g3 I m I C t i $t;</p>

G m T用图如下:

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

完成

净会问这种不实用又跟事务没啥联系的问题,气抖冷,我国前端什么时分才干真实的站起来。

谢谢面试官提出的好问题,我会努力完成出来的。

所以这个功用真的能^ X 6 w O =用纯P P f @ ~ 0 CS5 – B :S 完成吗?

答案是能够的,首要咱们来分解下思路。

CSS 鼠标! q ? y ?事情

( h I V _ ? i要根据题干,咱们知道这题是需求k B c i x用到鼠标操作的,JS 里咱们有各种mouse事情,但同样的,CSS 咱们也有:hover

这题咱们需求利用到的选择器便是:hover

判断方向

判断方向 的功用便是本题的中心。

从题图上来看,其实已经给了咱们方向的指引0 y U 0,便是告知咱们k N T 3 k A鼠标要经过四个箭头的方向进入。

然后便是假如要纯 CSS 来完成,便是咱们的鼠标必须) + ( –要触碰到某个要害节点,而R , .且这个节点的某个体现一定是能够代表这个方位的。

1 Q ` r R C 3 J C便是标题给出的两个躲藏条件。

所以咱们来尝试下完成。

首要要经过:hover来触碰到这个要害节点,而且是要在箭头指向的方向下触碰触发,那么咱们能够在箭头所指的方向都加上一个能被触碰到的物体,例如这样:

<style>
.block_hoverer {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.block_4 ( 7 m + Rhoverer:nth-child(1) {: D K
background: red;
}
.block_hoverer:nth-child(2) {
background: lime;
}
.block_hoverer:nth-child(3) {
background: orange;
}
.block_hoverer:nth-child(4) {
backg$ N { 9 8 v Cround: 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>

作用如下:

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

咱们能{ F 3够发现,除了 右块 之外,都被遮住了,嗯,正常现象。

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

代码如下:

.bR u J )lock_hoverer {
positio] ! q : 2 4 Un: absolute;
z-index: 1;
wi, b K J K C n pdth: 100%;
height: 100%;
transiR j b n P H :tion: all 0.3s ease;
}
.block_hoverer:nth-child(1) {
background: red0 * j / n 7 ~ n F;
tow M W I !p: -90%;
}
.block_hoverer:nth-child(2) {
background: lN & s Z ~ P r x Rime;
top: 90%;
}
.block_hoverer:nth-child(3) {
background:Q `  9 v % s Y Z orange;
left: -90%;
}
.block_hoverer:nE * ! B C 1 fth-child(4) {
back3 s B X g Nground: blue;
left) E C:D x  _ Q , 90%;
}

作用如下:

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

然后咱们加上过渡:

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

作用如下:

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

一步便是躲藏起来d * ( % # p i

.block {
positio& 9 } M { D O ~ qn:F ; T | S S / relative;
display: inline-blo^ | n | Lck;
overflow: hidden;
width: 10em;
heigD . m m zht: 10em;
vertical-align: middlF N N Z V # He;
}
.block_hoverer {
opacity: 0;
}
.block_hoverer:hover/ ) w T s T G j [ {
opacity: 1;
}

作用如下:

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

所以咱们有完好代码如下:

<style>
body {
padding: 2em;
text-align: centt V 1 j rer;
}
.block {
position: re: M 9 M Glative;
display: in; g Kline-block;
overf} Y Elow:hidden;
width: 10em;
height: 10em;
vertical-align: middle;
transform: translateZ(0);
}
.block_hoverer {
position: absolute;
z-index: 1;
width:c b t } M  q 100%;
height: 100%;
opacity: 0;
transition: all .3s ease;
}
.block_hoverer:nth-cz & 6 v rhild(1) {
background: red;
top: -90%;
}
.block_hoverer:nth-child(2) {
background: lime;
top: 90%;
}
.block_hoverer:nth-chiM A S F Q } c Eld(3) {
background: orange;
left: -90%;
}
.block_hoverer:nth-child(4) {
background: blue;
left: 90%;
}
.block_hoverer:hover {
opacity: 1;
top: 0;
left: 0;t ) ! B
}
.block_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: cu q Venter;
line-height: 10em;
background: #333;
color: #FFF;
}
</style>
<body>
<p class="text">从不同方向使鼠标指针移过下面的内容</p>
<p></p>
<span>4 I - </span>
<div class="block">
<div class="block_hoverer">1</div>
<div class="block_hoverer">2</div>
<div class="bl? 6 m G w 6 o C Nock_hoverer">3</div>
<div class="block_hover7 Y Y K X 2 2 L Per">4</div>
<div class="block_content">
Hover me!
</div>
</Z v ^ y U ( B ` udiv>
<span></span>
<p></p>
</body>

完好作用能够查看鱼头的codepew _ 0 |n

尽管没什么软用,但是敷衍面试官应该是够用了。

感谢面试官提出的问题,让我完成了这个功j 5 O v G $ r (用,对 CSS 有了更深的I j $理解。

后记p o % a

假如你喜欢讨论技能,或许对本文有任何的定见m ~ % { G /或建议,十分欢迎加鱼头微信老友一起讨论,当然,鱼头也十分希望能跟你一起聊生活,聊爱好,谈天说地。
鱼头的微信号是:krisChansA K o 395
7 & * Y c能够扫码重视大众号,订阅更多精彩内容。

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

发表评论

提供最优质的资源集合

立即查看 了解详情