"Sharp jquery-Learning Notes" tootip (hint box)

：

1. When the mouse moves to the hyperlink, there is a prompt box.

2. When the mouse moves to the picture animation rotation

Html:

                 <DivID= "Jnnotice">                    <DivID= "Jnmiaosha">                        <ahref= "#nogo"class= "JS_CSS3"><imgsrc= "Images/upload/20120216.jpg"alt= "Winter Goods clearance"  /></a>                    </Div>                    <DivID= "Jnnoticeinfo">                        <H2title= "Latest News">Latest News</H2>                        <ul>                            <Li><ahref= "# # #1"class= "tooltip"title= "[Event] Yi Chun Spring Shoes">[Event] Yi Chun Spring shoes big Promotion</a></Li>                            <Li><ahref= "# # #2"class= "tooltip"title= "[activity] thousands of winter boots new hot Let's.">[Activities] Thousands of winter boots new hot Let</a></Li>                            <Li><ahref= "# # #3"class= "tooltip"title= "[Event] Coey autumn/winter new 23 percent">Activities Coey autumn/Winter new 23 percent up</a></Li>                            <Li><ahref= "# # #4"class= "tooltip"title= "[Event] Yi Chun Spring Shoes">[Event] Yi Chun Spring shoes big Promotion</a></Li>                            <Li><ahref= "# # #5"class= "tooltip"title= "[activity] thousands of winter boots new hot Let's.">[Activities] Thousands of winter boots new hot Let</a></Li>                            <Li><ahref= "# # #6"class= "tooltip"title= "[Event] Coey autumn/winter new 23 percent">Activities Coey autumn/Winter new 23 percent up</a></Li>                        </ul>                        <BRclass= "Clear" />                    </Div>                </Div>

Css:

/*Latest News*/#jnNotice{float: Left;Height:321px;Overflow:Hidden;width:230px;}#jnMiaosha{float: Left;Height:176px;Margin-bottom:10px;Overflow:Hidden;width:230px;}. JS_CSS3 img{-webkit-transition:1s all;-moz-transition:1s all;-o-transition:1s all;transition:1s all;}. Js_css3:hover img{-webkit-transform:Rotate (720deg);-moz-transform:Rotate (720deg);-o-transform:Rotate (720deg);Transform:Rotate (720deg);}#jnNoticeInfo{float: Left;Border:1px solid #DFDFDF;Height:133px;Overflow:Hidden;width:228px;}#jnNoticeInfo H2{Height:23px;Line-height:23px;Border-bottom:1px solid #DFDFDF;text-indent:12px;}#jnNoticeInfo ul{float: Left;padding:6px 2px 0 12px;}#jnNoticeInfo Li{Height:20px;Line-height:20px;Overflow:Hidden;}#jnNoticeInfo Li a{Color:#666666;}#jnNoticeInfo li A:hover{Color:#008CD7;text-decoration:None;}/*Brand Activities*/

Js:

$(function () {    varx = 10; vary = 15; $("A.tooltip"). MouseOver (function(e) { This. MyTitle = This. title;  This. title = ""; vartooltip = "<div id = ' ToolTip ' >" + ( This. myTitle! =NULL? This. MyTitle: "") + "</div>"; $("Body"). Append (tooltip); $("#tooltip"). css ({"Top": (E.pagey + y) + "px",            "Left": (E.pagex + x) + "px"}). Show ("Fast"); }). mouseout (function () {         This. title = This. MyTitle; $("#tooltip"). Remove (); });});