• Author: Chen Da Yu Tou
  • Making: KRISACHAN

preface

In a previous front end technology group, one of the group members said that he had a problem in an interview when the interviewer asked him to implement a pure CSS DEMO that showed the direction of the object moving based on the mouse position.

The initial structure given is as follows:

<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">Move the mouse pointer in different directions over the content below</p>
<p>left</p>
<span>-</span>
<div class="block">
    <div class="block_content">
        Hover me!
    </div>
</div>
<span> ←</span>
<p>write</p>
Copy the code

The renderings are as follows:

implementation

Net will ask this kind of impractical and has nothing to do with business questions, gas shake cold, when can China’s front end really stand up.

Thank you for your good questions. I will try my best to make them come true.

So can this really be done with pure CSS?

The answer is yes. First let’s break down the idea.

CSS Mouse Events

First of all, we know that this problem is the use of the mouse operation, JS we have various mouse events, but similarly, CSS we also have :hover.

This problem we need to use the selector is :hover

Determine the direction

The ability to determine direction is at the heart of this case.

From the picture, in fact, we have given the direction of guidance, that is, tell us to mouse through the direction of the four arrows.

Then, for pure CSS, our mouse must touch some key node, and some representation of that node must represent that direction.

So those are the two hidden conditions that they gave us.

So let’s try to implement that.

First, to touch the key node by :hover, and to touch the trigger in the direction of the arrow, then we can add an object to be touched in the direction of the arrow, for example:

<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">on</div>
    <div class="block_hoverer">Under the</div>
    <div class="block_hoverer">On the left</div>
    <div class="block_hoverer">right</div>
    <div class="block_content">
        Hover me!
    </div>
</div>
Copy the code

The effect is as follows:

We can see that, except for the right block, everything is covered up, well, normal.

And then we just have to let these pieces fall back to the edge.

The code is as follows:

.block_hoverer {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: all 0.3 s 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%;
}
Copy the code

The effect is as follows:

Then we add transitions:

.block_hoverer {
  transition: all 0.3 s ease;
}
.block_hoverer:hover {
  opacity: 1;
  top: 0;
  left: 0;
}
Copy the code

The effect is as follows:

One step is to hide:

.block {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 10em;
  height: 10em;
  vertical-align: middle;
}
.block_hoverer {
  opacity: 0;
}
.block_hoverer:hover {
  opacity: 1;
}
Copy the code

The effect is as follows:

So we have the complete code as follows:

<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">Move the mouse pointer in different directions over the content below</p>
    <p>left</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>write</p>
</body>
Copy the code

The full effect can be seen in the codepen of the fish head

It’s nothing soft, but it should be enough to deal with the interviewer.

Thanks to the questions raised by the interviewer, I realized this function and had a deeper understanding of CSS.

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. His wechat id is krisChans95