时间:2021-05-08
在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 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>效果图如下:
实现
净会问这种不实用又跟业务没啥关系的问题,气抖冷,中国前端什么时候才能真正的站起来。 谢谢面试官提出的好问题,我会努力实现出来的。
所以这个功能真的能用纯 CSS 实现吗?
答案是可以的,首先我们来分解下思路。
CSS 鼠标事件
首先根据题干,我们知道这题是需要用到鼠标操作的,JS 里我们有各种 mouse 事件,但同样的,CSS 我们也有 :hover 。
这题我们需要利用到的选择器就是 :hover 了
判断方向
判断方向的功能便是本题的核心。
从题图上来看,其实已经给了我们方向的指引,就是告诉我们鼠标要通过四个箭头的方向进入。
然后就是如果要纯 CSS 来实现,就是我们的鼠标必须要触碰到某个关键节点,而且这个节点的某个表现一定是可以代表这个方位的。
这就是题目给出的两个隐藏条件。
所以我们来尝试下实现。
首先要通过 :hover 来触碰到这个关键节点,而且是要在箭头指向的方向下触碰触发,那么我们可以在箭头所指的方向都加上一个能被触碰到的物体,例如这样:
<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>效果如下:
我们可以发现,除了右块之外,都被遮住了,嗯,正常现象。
接下来我们只需要让这几个块退到边缘即可。
代码如下:
.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%;}效果如下:
然后我们加上过渡:
.block_hoverer { transition: all 0.3s ease;}.block_hoverer:hover { opacity: 1; top: 0; left: 0;}效果如下:
一步就是隐藏起来:
.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">从不同方向使鼠标指针移过下面的内容</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>完整效果可以查看鱼头的codepen
到此这篇关于基于CSS 判断鼠标进入的方向的文章就介绍到这了,更多相关css 鼠标进入方向内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、鼠标进入容器方向的判定判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来
做动画时,需要判断鼠标进入和退出容器的方向。网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例。注意绑定鼠标事件用的是on(),所以JQuer
最终效果这里的关键主要是判断鼠标是从哪个方向进入和离开的$("li").on("mouseentermouseleave",function(e){varw=t
本文介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,供大家参考,具体内容如下判断鼠标移入方向的功能函数functi
插件需求1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可~)2,鼠标移动到某个元素上时,改元素突出显示(css控