IT科技

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

时间：2010-12-5 17:23:32  作者：IT科技类资讯   来源：应用开发  查看：  评论：0
内容摘要：前言在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下：<style>

前言

在之前某一个前端技术群里，面试有一个群友说他面试的用纯时候遇到了一个问题，就是断鼠面试官让他用纯 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[2

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

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

域名资源有限，好域名更是有限，但机会随时都有，这取决于我们能否抓住机会。一般观点认为，国内域名注册太深，建议优先考虑外国注册人。外国注册人相对诚实，但价格差别很大，从几美元到几十美元不等。域名投资者应抓住机遇，尽早注册国外域名。
如果你的潜在终端必须是这个米（域名），那么潜在终端并不多，也没有硬通货，那么你的域名应该在终端有兴趣购买时出售。否则，你可能得自己留着吃。
最近更新
热门排行
友情链接
    copyright © 2025 powered by 益强资讯全景  滇ICP备2023006006号-31sitemap