鼠标经过焦点淡出提示功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>鼠标悬停 - 蘋果·志 - goldapple's blog</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>BODY {
 FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
A {
 DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none
}
UL {
 MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none
}
LI {
  FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center
}
SPAN {
 DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px
}
</STYLE>

<SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
 
  
$(function(){
  
   
  $('li:eq(0)').append('<span>看到我说明测试成功<\/span>');
   
  $('li:eq(1)').append('<span>看到我说明测试很成功<\/span>');
   
  $('li:eq(2)').append('<span>看到我说明你好奇心真的很强<\/span>');
   
   
  $('#a input').hover(function(){
      
    $(this).next('span').animate({opacity:"show",left:"-85px"},500); 
       
   },function(){
       
   $(this).next('span').animate({opacity:"hide",left:"-105px"},500);;
       
   }); 
  
})
  
</SCRIPT>

<META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD>
<BODY>
<div id="a">
<UL>
  <LI><input type="text" name="a"> </LI>
  <LI><input type="text" name="a"> </LI>
  <LI><A href="http://www.goldapple.name">鼠标悬停测试</A>
</LI></UL>
</div>
<div style="display:none"><script src="http://s1.cnzz.com/stat.php?id=1454794&web_id=1454794" language="JavaScript" charset="gb2312"></script></div>
</BODY></HTML>

你可能感兴趣的:(JavaScript,html,jquery,PHP,css)