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
HTML Button.onclick Event Summary Css code of forced line breaking and non line breaking in chinese and english Two Functions in ASP to Prevent SQL Injection Fourteen problems that most headache PHP beginners Add cloud input method for your Zblog (QQ, Sogou, Baidu) 24 classic page turning and paging css codes