Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use pure CSS to judge the direction of mouse entry". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to use pure CSS to judge the direction of mouse entry"!

A problem encountered during the interview was that the interviewer asked the interviewer to use pure CSS to implement a DEMO that feels the direction of object movement according to the mouse position.

The initial structure is as follows:

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

}

Move the mouse pointer over the following in different directions

↓

→

Hover me!

←

↑

The effect picture is as follows:

Realize

Jing will ask this kind of question, which is impractical and has nothing to do with business. When will the front end of China really stand up?

Thank you for the interviewer's good question. I will try my best to realize it.

So can this function really be implemented in pure CSS?

The answer is yes, first of all, let's break down the train of thought.

CSS Mouse event

First of all, according to the question stem, we know that this question needs to be operated with a mouse. We have all kinds of mouse events in JS, but similarly, we also have CSS: hover.

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

Judge the direction

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

From the picture, in fact, it has given us the direction, that is, it tells us that the mouse should enter through the direction of the four arrows.

Then, if you want to achieve pure CSS, that is, our mouse must touch a key node, and some performance of this node must represent this direction.

These are the two hidden conditions given by the title.

So let's try to make it happen.

First of all, to touch this critical node through: hover, and to touch the trigger in the direction of the arrow, then we can add an object that can be touched in the direction pointed by the arrow, such as this:

.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

}

Go up

Lower

Left

Right

Hover me!

The effect is as follows:

We can find that, with the exception of the right block, it's all covered up, um, normal.

Next we just need to get these pieces 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:

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

}

Move the mouse pointer over the following in different directions

↓

→

one

two

three

four

Hover me!

←

↑

At this point, I believe you have a deeper understanding of "how to use pure CSS to judge the direction of mouse entry". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.