cocos判断鼠标点击_面试官:你可以用纯 CSS 判断鼠标进入的方向吗?
(给前端大全加星标,提升前端技能)
作者: 鱼头的Web海洋 公号 / 陈大鱼头 (本文来自作者投稿)
前言
在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。
给出的初始结构如下:
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;}
从不同方向使鼠标指针移过下面的内容
↓
→
Hover me!
←
↑
效果图如下:
实现
净会问这种不实用又跟业务没啥关系的问题,气抖冷,中国前端什么时候才能真正的站起来。
谢谢面试官提出的好问题,我会努力实现出来的。
所以这个功能真的能用纯 CSS 实现吗?
答案是可以的,首先我们来分解下思路。
CSS 鼠标事件
首先根据题干,我们知道这题是需要用到鼠标操作的,JS 里我们有各种mouse
事件,但同样的,CSS 我们也有:hover
。
这题我们需要利用到的选择器就是:hover
了
判断方向
判断方向 的功能便是本题的核心。
从题图上来看,其实已经给了我们方向的指引,就是告诉我们鼠标要通过四个箭头的方向进入。
然后就是如果要纯 CSS 来实现,就是我们的鼠标必须要触碰到某个关键节点,而且这个节点的某个表现一定是可以代表这个方位的。
这就是题目给出的两个隐藏条件。
所以我们来尝试下实现。
首先要通过:hover
来触碰到这个关键节点,而且是要在箭头指向的方向下触碰触发,那么我们可以在箭头所指的方向都加上一个能被触碰到的物体,例如这样:
.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;}
上
下
左
右
Hover me!
效果如下:
我们可以发现,除了 右块 之外,都被遮住了,嗯,正常现象。
接下来我们只需要让这几个块退到边缘即可。
代码如下:
.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;}
效果如下:
完整效果
所以我们有完整代码如下:
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; }
从不同方向使鼠标指针移过下面的内容
↓
→
1
2
3
4
Hover me!
←
↑
完整效果可以查看鱼头的codepen[2]
虽然没什么软用,但是应付面试官应该是够用了。
感谢面试官提出的问题,让我实现了这个功能,对 CSS 有了更深的理解。
References
[1]
KRISACHAN: https://github.com/KRISACHAN[2]
codepen: https://codepen.io/krischan77/pen/RzomRX
推荐阅读 点击标题可跳转
二营长,快掏个CSS出来给我画个井字棋游戏
CSS 故障艺术
我写CSS的常用套路(附demo的效果实现与源码)
觉得本文对你有帮助?请分享给更多人
关注「前端大全」加星标,提升前端技能
好文章,我在看❤️
cocos判断鼠标点击_面试官:你可以用纯 CSS 判断鼠标进入的方向吗?相关推荐
- 面试官:你用纯CSS来写个游戏吗?
作者:陈大鱼头 github: KRISACHAN 前言 不知道大家小时候有没有玩过一款游戏叫『井字棋』的. 它长这样: (我赢了,快夸我 ~o(´^`)o) 上面的就是本次文章的最终结果,一个用纯C ...
- 鼠标点击某处, 让精灵移动到该处 (如下图) 鼠标移动时, 让精灵跟随鼠标移动
今天这个最有意思 <!DOCTYPE html> <html><head><meta charset="UTF-8"><sty ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- 纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活 鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
- cocos判断鼠标点击_鼠标左键失灵怎么办?鼠标左键不灵敏的修复方法
鼠标用久了之后,就有可能会出现鼠标左键失灵或者不灵敏的情况,这要怎么修复呢?鼠标左键不灵敏该如何解决?本文就给大家详细介绍鼠标用久了后左键不灵敏或失灵的解决方法. 解决方法: 1.比如鼠标右键失灵,可 ...
- 引用计数器法 可达性分析算法_面试官:你说你熟悉jvm?那你讲一下并发的可达性分析...
持续输出原创文章,点击蓝字关注我吧 上面这张图是我还是北漂的时候,在鼓楼附近的胡同里面拍的. 那天刚刚下完雨,路过这个地方的时候,一瞬间就被这五颜六色的门板和自行车给吸引了,于是拍下了这张图片.看到这 ...
- mysql怎么用_面试官都是这样发问的,连环冲锋炮,看你怎么抵挡(上)
本内容来源于和尚 16 年毕业的学长,先在 58,后阿里,如今准备跳槽了,以下内容为他的最近面试经历 我最近从大厂离职之后在合肥呆了个把月,之前已经准备了半个多月,从7月底开始投简历面试,目前是jav ...
- @data注解不生效_面试官:你经常在SpringBoot中使用的条件注解底层是如何实现的?你了解过吗?...
SpringBoot内部提供了特有的注解:条件注解(Conditional Annotation).比如@ConditionalOnBean.@ConditionalOnClass.@Conditio ...
- js var是什么类型_面试官问你JS基本类型时他想知道什么?
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 面试的时候我们经常会被问答js的数据类型.大部分情况我们会这样回答包括: 1.基本类型(值类型或者 ...
- redis删除过期key的算法_面试官别再问我Redis内存满了该怎么办了
概述 Redis的文章,我之前写过一篇关于「Redis的缓存的三大问题」,累计阅读也快800了,对于还只有3k左右的粉丝量,能够达到这个阅读量,已经是比较难了. 这说明那篇文章写的还过得去,收到很多人 ...
最新文章
- 研究院正式启动“智源学者计划”,公布候选人名单,并发布首个联合实验室...
- Java和操作系统交互细节
- vba xml 怎么设置父节点_熊二做了一个xml报文处理的开源库easyxml
- windowbuilder怎么加图片_一键制作音乐图片,这效果太惊艳了!微信这个功能简直是“宝藏”...
- pip指定源安装_几种python安装简单方法
- shell 字符(串)处理命令
- Android之NDK开发(转)
- qt 实现、区分鼠标单击,双击事件
- 【北邮计算机考研】2022年北京邮电大学计算机考研考情分析
- 华硕计算机在哪里看显卡cpussD,显卡怎么看型号(怎么看华硕显卡的性能档次)...
- Quartus II cyclone 系列fpga程序下载到flash中
- 设置8211网口方法并关闭EEE模式
- 物联网4G工业路由器在森林烟火监测的应用
- 产品读书《创业36条军规》
- 使用nano编辑器进行查找和替换
- CorelDRAW2022最新版本号V24.0.0.301订阅版
- 使用Spring cloud框架完成中小信息化项目
- Linux服务器硬盘故障后恢复数据的方法和数据恢复过程
- HZNUOJ1527
- 论文 | 导航 | 2022年亚利桑那州立大学硕士论文《图神经网络与优势Actor-Critic强化学习算法用于多智能体导航》