鼠标经过焦点淡出提示功能
<!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>
