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

Blog    

Recommend

Detailed explanation of the difference between "/" and "~" in Linux

"/" is the root directory, and "~&...

MySQL infrastructure tutorial: detailed explanation of the query statement execution process

Preface I have always wanted to know how a SQL st...

A brief discussion on front-end network, JavaScript optimization and development tips

1. Network Optimization YSlow has 23 rules. These...

Setting the width of table cell td is invalid and the internal content always stretches it

When making a table page, sometimes the width set ...

Detailed explanation of HTML body tag and commonly used control tags in HTML

1. <body> tag: Used to mark the main body o...

How to clean up Alibaba Cloud MySQL space

Today I received a disk warning notification from...

The process of building lamp architecture through docker container

Table of contents 1. Pull the centos image 2. Bui...

Ubuntu 20.04 how to modify the IP address example

illustrate: Today, when continuing the last offic...

Detailed explanation of the background-position percentage principle

When I was helping someone adjust the code today,...

Chinese website user experience rankings

<br />User experience is increasingly valued...

Solve the error of installing VMware Tools on Ubuntu 18.04

1. According to the online tutorial, the installa...

Detailed explanation of the implementation principle of ACID transaction in Mysql

introduction As usual, let's start with a sce...

Detailed explanation of client configuration for vue3+electron12+dll development

Table of contents Modify the repository source st...

How to change the terminal to a beautiful command line prompt in Ubuntu 18

I reinstalled VMware and Ubuntu, but the command ...

6 Uncommon HTML Tags

First: <abbr> or <acronym> These two s...