The following code uses the image above. Save it.
<! 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> <meta http-equiv =" content-Type "content =" text/html; charset = gbk "/> <title> CSS pseudo-class implementation of the mouse sliding link </title> <style> @ charset" UTF-8 "; /* CSS Document For www.jb51.net */body {text-align: center; font-size: 12px; color: #777777; font-family: Verdana, Arial, Verdana, sans-serif, ""; background-color: # FFFFFF; margin: 0; padding: 0 ;}# Nav {margin: 0; float: left; padding: 5px 5px; text-align: center; width: 280px; border: 1px solid #777777 ;}# Nav ul {margin: 0; padding: 0; list-style-type: none ;} # Nav li {float: left; margin: 0; width: 130px; height: 33px; margin-left: 5px; padding: 0 ;}# Nav a {display: block; width: 130px; height: 33px; line-height: 33px;} # Nav. dict: link, # Nav. dict: visited {text-decoration: none; background: url (http://www.bkjia.com/uploads/allimg/131016/05524121B-0.gif) left top no-repeat ;}# Nav. dict: hover, # Nav. dict: active {text-decoration: none; font-weight: bold; background: url (http://www.bkjia.com/uploads/allimg/131016/05524121B-0.gif) left-33px no-repeat;} # Nav. mediaPlay: link, # Nav. mediaPlay: visited {text-decoration: none; background: url (http://www.bkjia.com/uploads/allimg/131016/05524121B-0.gif) left-66px no-repeat ;}# Nav. mediaPlay: hover, # Nav. mediaPlay: active {text-decoration: none; font-weight: bold; background: url (http://www.bkjia.com/uploads/allimg/131016/05524121B-0.gif) left-99px no-repeat;} # Nav. realPlay: link, # Nav. realPlay: visited {text-decoration: none; background: url (http://www.bkjia.com/uploads/allimg/131016/05524121B-0.gif) left-132px no-repeat ;}# Nav. realPlay: hover, # Nav. realPlay: active {text-decoration: none; font-weight: bold; background: url (http://www.bkjia.com/uploads/allimg/131016/05524121B-0.gif) left-165px no-repeat ;} </style> </pead> <body> <center> <ul> <li> </li> <li> MediaPlay </li> <li> RealPlay </li> <li> MediaPlay </li> <li> RealPlay </li> </ul> </center> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]