面试官：你可以用纯CSS判断鼠标进入的方向吗？

前言

宁国网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。成都创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。

给出的初始结构如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. 从不同方向使鼠标指针移过下面的内容
     
    3. 
  
  
  
  
  3. ↓
     
    4. 
  
  
  
  
  4. →  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.         Hover me! 
    8. 
  
  
  
  
  8.     
 
  •  
  •  ← 

  • ↑

    • 效果图如下：

    实现

    净会问这种不实用又跟业务没啥关系的问题，气抖冷，中国前端什么时候才能真正的站起来。

    谢谢面试官提出的好问题，我会努力实现出来的。

    所以这个功能真的能用纯 CSS 实现吗？

    答案是可以的，首先我们来分解下思路。

    CSS 鼠标事件

    首先根据题干，我们知道这题是需要用到鼠标操作的，JS 里我们有各种mouse事件，但同样的，CSS 我们也有:hover。

    这题我们需要利用到的选择器就是:hover了

    判断方向

    判断方向 的功能便是本题的核心。

    从题图上来看，其实已经给了我们方向的指引，就是告诉我们鼠标要通过四个箭头的方向进入。

    然后就是如果要纯 CSS 来实现，就是我们的鼠标必须要触碰到某个关键节点，而且这个节点的某个表现一定是可以代表这个方位的。

    这就是题目给出的两个隐藏条件。

    所以我们来尝试下实现。

    首先要通过:hover来触碰到这个关键节点，而且是要在箭头指向的方向下触碰触发，那么我们可以在箭头所指的方向都加上一个能被触碰到的物体，例如这样：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     上
     
  •     下 
  •     左 
  •     右 
  •      
  •         Hover me!
  •       

  • 效果如下：

    我们可以发现，除了 右块 之外，都被遮住了，嗯，正常现象。

    接下来我们只需要让这几个块退到边缘即可。

    代码如下：

     
 
 
 
      
  
  
  
  
    1. .block_hoverer { 
      2. 
  
  
  
  
    2.   position: absolute; 
      3. 
  
  
  
  
    3.   z-index: 1; 
      4. 
  
  
  
  
    4.   width: 100%; 
      5. 
  
  
  
  
    5.   height: 100%; 
      6. 
  
  
  
  
    6.   transition: all 0.3s ease; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. .block_hoverer:nth-child(1) { 
      9. 
  
  
  
  
    9.   background: red; 
      10. 
  
  
  
  
    10.   top: -90%; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .block_hoverer:nth-child(2) { 
      13. 
  
  
  
  
    13.   background: lime; 
      14. 
  
  
  
  
    14.   top: 90%; 
      15. 
  
  
  
  
    15. } 
      16. 
  
  
  
  
    16. .block_hoverer:nth-child(3) { 
      17. 
  
  
  
  
    17.   background: orange; 
      18. 
  
  
  
  
    18.   left: -90%; 
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20. .block_hoverer:nth-child(4) { 
      21. 
  
  
  
  
    21.   background: blue; 
      22. 
  
  
  
  
    22.   left: 90%; 
      23. 
  
  
  
  
    23. }
      24.

    效果如下：

    然后我们加上过渡：

     
 
 
 
      
  
  
  
  
    1. .block_hoverer { 
      2. 
  
  
  
  
    2.   transition: all 0.3s ease; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .block_hoverer:hover { 
      5. 
  
  
  
  
    5.   opacity: 1; 
      6. 
  
  
  
  
    6.   top: 0; 
      7. 
  
  
  
  
    7.   left: 0; 
      8. 
  
  
  
  
    8. }
      9.

    效果如下：

    最后一步就是隐藏起来：

     
 
 
 
      
  
  
  
  
    1. .block { 
      2. 
  
  
  
  
    2.   position: relative; 
      3. 
  
  
  
  
    3.   display: inline-block; 
      4. 
  
  
  
  
    4.   overflow: hidden; 
      5. 
  
  
  
  
    5.   width: 10em; 
      6. 
  
  
  
  
    6.   height: 10em; 
      7. 
  
  
  
  
    7.   vertical-align: middle; 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9. .block_hoverer { 
      10. 
  
  
  
  
    10.   opacity: 0; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .block_hoverer:hover { 
      13. 
  
  
  
  
    13.   opacity: 1; 
      14. 
  
  
  
  
    14. }
      15.

    效果如下：

    完整效果

    所以我们有完整代码如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     从不同方向使鼠标指针移过下面的内容
       
      4. 
  
  
  
  
    4.     
      ↓
       
      5. 
  
  
  
  
    5.     →  
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.         1 
      8. 
  
  
  
  
    8.         2 
      9. 
  
  
  
  
    9.         3 
      10. 
  
  
  
  
    10.         4 
      11. 
  
  
  
  
    11.          
      12. 
  
  
  
  
    12.             Hover me! 
      13. 
  
  
  
  
    13.          
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.      ← 
      16. 
  
  
  
  
    16.     
      ↑
       
      17. 
  
  
  
  
    17.

    完整效果可以查看鱼头的codepen[2

    虽然没什么软用，但是应付面试官应该是够用了。

    感谢面试官提出的问题，让我实现了这个功能，对 CSS 有了更深的理解。

    当前标题：面试官：你可以用纯CSS判断鼠标进入的方向吗？
    转载来源：http://www.shufengxianlan.com/qtweb/news44/215694.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    标签优化知识

    分类信息网

    德阳定制网站建设　　 　云服务器　　 　娃娃鱼鱼苗　　 　联通机房服务器托管　　 　网站设计公司　　 　泸州叙永网站建设　　 　商城网站　　 　成都装修公司　　 　手机网站建设　　 　网络营销推广　　 　名片　　 　研学实践　　 　成都光华机房　　 　成都网站推广　　 　雅安服务器托管　　 　成都名片印刷厂　　 　成都网络营销　　 　微信公众号开发　　 　成都石膏隔墙板　　 　移动网站建设