分享更有价值
被信任是一种快乐

如何用纯CSS判断鼠标进入的方向

文章页正文上

本篇内容主要讲解“如何用纯CSS判断鼠标进入的方向”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何用纯CSS判断鼠标进入的方向”吧!
  面试的时候遇到了一个问题,就是面试官让用纯 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;
  }
  
  
  从不同方向使鼠标指针移过下面的内容
  ↓
  
  
  
  
  
  
  
  Hover me!
  
  
  
  ↑
  到此,相信大家对“如何用纯CSS判断鼠标进入的方向”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: nodejs的路由怎么配置和使用

今天小编给大家分享一下nodejs的路由怎么配置和使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 在nodejs中,路由指的是url地址和响…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册