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:

Copy code The code is as follows:

* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px ; padding:0px; overflow:auto; }
.line0 { line-height:20px; background-color:lightyellow; padding:0px 15px; }
.line1 { line-height:18px; background-color: lightblue; padding:0px 10px; }
.w { position:absolute; lift:10px; top:10px; width:1px; height:300px; overflow:hidden; border:2px groove #281; cursor:default; - moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
.winBody { height:270px; width:160px; overflow-x:auto; overflow-y:auto; border-top:1px inset blue; padding :10px; background-color:white; }

JS code:

Copy code The code is as follows:

HTML code:

Copy code The code is as follows:

Student Information

Student ID: 0123456789


Name: Xiao Ming


College: Software College


Major: Software Engineering


Class: Class 1

Use a floating box to display some information. When you need to see it, point to it and it will come out, which is very convenient; when you move the mouse away when it is not needed, it will silently leave on its own. Although it is very simple, it has a good user experience. Making things that make users comfortable is our constant pursuit.