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

时间 2020-05-09

原文原文链接

做者：陈大鱼头

github： KRISACHAN

前言

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

给出的初始结构以下：html

<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>
复制代码

效果图以下：前端

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef086e3ebc2?w=445&h=363&f=png&s=5549

实现

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

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

因此这个功能真的能用纯 CSS 实现吗？面试

答案是能够的，首先咱们来分解下思路。微信

CSS 鼠标事件

首先根据题干，咱们知道这题是须要用到鼠标操做的，JS 里咱们有各类mouse事件，但一样的，CSS 咱们也有:hover。ui

这题咱们须要利用到的选择器就是:hover了spa

判断方向

判断方向 的功能即是本题的核心。指针

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

而后就是若是要纯 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>
复制代码

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef087b7e7bc?w=477&h=410&f=png&s=5449

咱们能够发现，除了右块以外，都被遮住了，嗯，正常现象。

接下来咱们只须要让这几个块退到边缘便可。

代码以下：

.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%;
}
复制代码

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef05356773b?w=559&h=480&f=png&s=7453

而后咱们加上过渡：

.block_hoverer {
  transition: all 0.3s ease;
}
.block_hoverer:hover {
  opacity: 1;
  top: 0;
  left: 0;
}
复制代码

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef06190ecb4?w=650&h=523&f=gif&s=40417

一步就是隐藏起来：

.block {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 10em;
  height: 10em;
  vertical-align: middle;
}
.block_hoverer {
  opacity: 0;
}
.block_hoverer:hover {
  opacity: 1;
}
复制代码

效果以下：

https://user-gold-cdn.xitu.io/2020/4/29/171c3ef060c91258?w=650&h=523&f=gif&s=36139

因此咱们有完整代码以下：

<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 有了更深的理解。

后记

若是你喜欢探讨技术，或者对本文有任何的意见或建议，很是欢迎加鱼头微信好友一块儿探讨，固然，鱼头也很是但愿能跟你一块儿聊生活，聊爱好，谈天说地。鱼头的微信号是：krisChans95 也能够扫码关注公众号，订阅更多精彩内容。