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>
