这篇文章给大家分享的是有关CSS如何判断鼠标进入的方向的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯CSS来实现一个根据鼠标移动位置觉得物体移动方向的演示。
给出的初始结构如下:
效果图如下:
<人物> 
& lt; style>
.block_hoverer {
,,,位置:,绝对;
,,,宽度:,100%;
,,,身高:,100%;
,,,z - index:, 1;
}
.block_hoverer: nth-child (1), {
,,,背景:,红色;
}
.block_hoverer: nth-child (2), {
,,,背景:,石灰;
}
.block_hoverer: nth-child (3), {
,,,背景:,橙色;
}
.block_hoverer: nth-child (4), {
,,,背景:,蓝色;
}
& lt;/style>
& lt; div 类=癰lock"祝辞
,,,& lt; div 类=癰lock_hoverer"在上& lt;/div>
,,,& lt; div 类=癰lock_hoverer"祝辞下& lt;/div>
,,,& lt; div 类=癰lock_hoverer"在左& lt;/div>
,,,& lt; div 类=癰lock_hoverer"在右& lt;/div>
,,,& lt; div 类=癰lock_content"比;
,,,,,,,Hover 我!
,,,& lt;/div>
& lt;/div>
效果如下:
<人物> 
我们可以发现,除了<强>右块之外,都被遮住了,嗯,正常现象。
接下来我们只需要让这几个块退到边缘即可。
代码如下:
效果如下:
<人物> 
