Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><title>A label with the slider followed by the mouse is displayed.</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<pead>与</pead>之间--><style type="text/css"># Mydiv * {margin: 0; padding: 0; font: 100 12px/25px 'arial'; background: transparent;} # mydiv ul {overflow: hidden ;} # mydiv ul li {float: left; padding: 0 10px; text-align: center; list-style: none ;}# mydiv ul li a {color: black; text-decoration: none ;}</style><script src="http://www.google.com/jsapi"></script><script language="javascript">Google. load ("jquery", "1.3.1"); google. setOnLoadCallback (OnLoad); function OnLoad () {var div = $ ("<div id='wrap1'></div>"Includev.css ({border:" 2px solid red ", background: 'yellow', position:" absolute ", left:" 0px ", height:" 25px ", width: "0px", zIndex: "1"}); $ ("# mydiv "). prepend (div); var ul_left = $ ("# mydiv ul "). position (). left; var ul_top = $ ("# mydiv ul "). position (). top; $ ("# mydiv ul" placement .css ({position: 'Absolute ', left: ul_left, top: ul_top, zIndex: '2 '}); move _ ($ ("# mydiv ul li "). eq (0) function move _ (elem) {div. animate ({left: elem. position (). left + 15, width: elem. width () + 4}, "fast", "swing") }$ ("# mydiv ul li "). mouseover (function () {move _ ($ (this ))});}</script></pead><body>An error is prompted in the lower left corner of the preview result, and the effect is invisible. Refresh the page to see the effect. Of course, this problem does not occur in actual use.<br><br><!--把下面代码加到<body>与</body>之间--><div class="" id="mydiv"> <ul> <li> <p>Front end</p> </li> <li> <p>Background</p> </li> <li> <p>User Experience</p> </li> <li> <p>Operating system</p> </li> <li> <p>Network security</p> </li> </ul></div></body></ptml>
Tip: you can modify some code before running
