Home >Web Front-end >JS Tutorial >Write a floating box that can be automatically hidden with js and css_javascript skills
Today I will write a small example, using js and css to write a floating box that can be automatically hidden. CSS is definitely used to control styles, and js is used to control display and hiding. Displaying and hiding are usually implemented in two ways: 1. Use js to control its display attributes; 2. Use js to control its size.
What I’m going to talk about today is to make elements visible and hidden by controlling their size. The principle is: register mouse move-in and move-out events for it. When the mouse moves out of the object range, set its width to 1. When the mouse moves again Move the object in, restoring its width. It’s very simple, let’s take a look!
Hidden state:
The narrow line on the left is the floating box after hiding.
Display status:
When the mouse slides over the floating box on the left, the floating box will be displayed again.
CSS style: