![5684947c38f1539b32646729c0cf7457.png](https://img-blog.csdnimg.cn/img_convert/5684947c38f1539b32646729c0cf7457.png)
一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。
给出的初始结构如下:
<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">从不同方向使鼠标指针移过下面的内容</p>
<p>↓</p>
<span>→ </span>
<div class="block">
<div class="block_content">
Hover me!
</div>
</div>
<span> ←</span>
<p>↑</p>
效果图如下:
![ecd5fc080b4ec55bc5c03a4e61be2faf.png](https://img-blog.csdnimg.cn/img_convert/ecd5fc080b4ec55bc5c03a4e61be2faf.png)
实现
净会问这种不实用又跟业务没啥关系的问题,气抖冷,中国前端什么时候才能真正的站起来。
谢谢面试官提出的