JQuery implements the effect of mouse sliding delay display
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" https://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery implements the effect of mouse sliding delay display- Tuoyuan Network </title> <script type="text/javascript" src=" https://code.jquery.com/jquery-1.4.2.min.js "></script> <script type="text/javascript"> $(function(){ $('.post').mou SEO ver(function(){ hideTimer=setTimeout("$('.post > .demo').show();",1000);// Mouse over the element for 1 second to display child elements }).mouseleave(function(){ clearTimeout(hideTimer);// Clear Timer hideTimer=setTimeout("$('.post > .demo').hide();",10);// Mouse removal element area Sub element disappears }); }); </script> <style type="text/css"> <!-- * { margin:0; padding:0; } body { margin:0; padding:0; } div { font-size:26px; color:#fff; text-align:center; line-height:200px; } .box { width:980px; margin:0 auto; background:#eee; } .post { width:600px; height:200px; background:#36C; position:relative; } .demo { width:380px; height:200px; position:absolute; top:0; right:-380px; background:#F90; display:none; } --> </style> </head> <body> <div class="box"> <div class="post">There is a surprise when you hover over here for one second< Div class="demo">Congratulations on seeing a warm color</ div></div> </div> </body> </html>
Related articles
CSS Implementation of Table Interlaced Color Change 
Extending CSS style of pop-up background to full screen advertising link 
Set as the code of home page and favorite site, compatible with IE, chrome, firefox 
Jquery determines the browser type 
Jquery selector nth child usage 
JQuery anchor link smooth scrolling effect
