Js and CSS write a hover box that can be automatically hidden
- 2020-03-30 02:16:35
- OfStack
Today, write a small instance, using js and CSS to write a hover box that can be automatically hidden. CSS is definitely used to control styles, and js is used for controllers to show and hide. Show and hide are usually implemented in two ways: 1. Js is used to control its display property; 2. 2. Use js to control its size.
What I want to talk about today is to achieve the explicit blanking of an element by controlling its size. The principle is to register the mouse-in and mouse-out events for it, set its width to 1 when the mouse moves out of the scope of the object, and restore its width when the mouse moves into the object again. It's easy. Let's have a look!
Hidden state:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140305163338.jpeg? 201425163418 ">
The narrow line on the left is the floating frame behind.
Display status:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140305163437.jpeg? 201425163457 ">
When the mouse slides over the left hover box, the hover box appears again.
CSS styles:
JS code:
HTML code:
Use the floating box to display some information, when the need to see, point at it, it will obediently out, very convenient; When the mouse is not needed to move away, it will be very interesting to leave quietly. Although it is very simple, but there is a good user experience, make users comfortable things, is our constant pursuit.
What I want to talk about today is to achieve the explicit blanking of an element by controlling its size. The principle is to register the mouse-in and mouse-out events for it, set its width to 1 when the mouse moves out of the scope of the object, and restore its width when the mouse moves into the object again. It's easy. Let's have a look!
Hidden state:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140305163338.jpeg? 201425163418 ">
The narrow line on the left is the floating frame behind.
Display status:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/20140305163437.jpeg? 201425163457 ">
When the mouse slides over the left hover box, the hover box appears again.
CSS styles:
<style>
* { font-size:12px; font-family:Verdana, Song typeface ; }
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; }
</style>
JS code:
<script type="text/javascript">
function myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //block
function myhide(){
//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px";
}
//Test with, random generation of some content, easy to test the effect.
for(var i=0; i<400; i++)document.write("<div class="line"+(i%2)+"">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"</div>");
new function(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</script>
HTML code:
<body >
<div class="w" id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div class="t"> Student information </div>
<div class="winBody">
Student number: <label>0123456789 </label><br><br>
Name: <label> Xiao Ming </label><br><br>
College: <label> Software college </label><br><br>
Professional: <label> Software engineering </label><br><br>
Class: <label> A class of </label><br><br>
</div>
</div>
</body>
Use the floating box to display some information, when the need to see, point at it, it will obediently out, very convenient; When the mouse is not needed to move away, it will be very interesting to leave quietly. Although it is very simple, but there is a good user experience, make users comfortable things, is our constant pursuit.