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

This article mainly explains "how to use pure CSS to judge the direction of mouse entry". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use pure CSS to judge the direction of mouse entry".

Preface

Use pure CSS to achieve a DEMO that feels the direction of object movement according to the position of the mouse.

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!

←

↑

Thank you for your reading, the above is the content of "how to use pure CSS to judge the direction of mouse entry". After the study of this article, I believe you have a deeper understanding of how to use pure CSS to judge the direction of mouse entry. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.