Determine the direction of mouse entry based on CSS

Determine the direction of mouse entry based on CSS

In a front-end technology group before, a group member said that he encountered a problem during the interview. The interviewer asked him to use pure CSS to implement a DEMO that determines the direction of an object's movement based on the position of the mouse.

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 over the following content from different directions</p>
<p>↓</p>
<span>→ </span>
<div class="block">
    <div class="block_content">
        Hover me!
    </div>
</div>
<span>←</span>
<p>↑</p>

The effect diagram is as follows:

accomplish

They only ask such impractical questions that have nothing to do with the business. It's so frustrating. When will China's front-end really stand up? Thank you for the good question, I will try my best to implement it.

So can this functionality really be achieved with pure CSS?

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

CSS Mouse Events

First of all, according to the question, we know that this question requires the use of mouse operation. In JS we have various mouse events, but similarly, in CSS we also have :hover .

The selector we need to use in this question is :hover hover

Determine the direction

The function of judging direction is the core of this question.

Judging from the title picture, we have actually been given directional guidance, which tells us that the mouse should enter in the direction of the four arrows.

Then, if we want to implement it with pure CSS, our mouse must touch a key node, and a certain performance of this node must be able to represent this position.

These are the two hidden conditions given in the question.

So let's try to implement it.

First, we need to touch this key node through :hover , and the touch should be triggered in the direction of the arrow. Then we can add an object that can 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">Top</div>
    <div class="block_hoverer">Next</div>
    <div class="block_hoverer">Left</div>
    <div class="block_hoverer">Right</div>
    <div class="block_content">
        Hover me!
    </div>
</div>

The effect is as follows:

We can see that except for the right block , everything else is covered. This is normal.

Next we just need to move these blocks back to the edge.

The code is as follows:

.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%;
}

The effect is as follows:

Then we add the transition:

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

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;
}

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 over the following content from different directions</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>

For the full effect, you can view the codepen of Yutou

This is the end of this article about determining the direction of mouse entry based on CSS. For more relevant CSS mouse entry direction content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  A brief discussion on the underlying principle of mysql join

>>:  HTML background color gradient effect achieved through CSS style

Recommend

Creation, constraints and deletion of foreign keys in MySQL

Preface After MySQL version 3.23.44, InnoDB engin...

The process of installing MySQL 8.0.26 on CentOS7

1. First, download the corresponding database fro...

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

In the past, float was often used for layout, but...

Comprehensive summary of MYSQL tables

Table of contents 1. Create a table 1.1. Basic sy...

Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles After going around in ...

MYSQL string forced conversion method example

Preface Since the types of the same fields in the...

Installation and deployment tutorial of the latest MySQL version 5.7.17 (64bit ZIP green version) under Win 8 or above

First of all, the blogger is playing the communit...

Solve the problem of not being able to access the RabbitMQ management page in the Linux server

Because a certain function of my project requires...

How to build a multi-node Elastic stack cluster on RHEL8 /CentOS8

Elastic stack, commonly known as ELK stack, is a ...

How to solve the Docker container startup failure

Question: After the computer restarts, the mysql ...

How to implement a binary search tree using JavaScript

One of the most commonly used and discussed data ...

Solve the problem that VMware cannot install 64-bit operating system in win10 home version

Problem Description When VMware Workstation creat...

Vue realizes the progress bar change effect

This article uses Vue to simply implement the cha...

Implementing timed page refresh or redirect based on meta

Use meta to implement timed refresh or jump of th...

img usemap attribute China map link

HTML img tag: defines an image to be introduced in...