Home > Developer > JavaScript
In fact, the image can be defined by CSS code during normal use.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en"> <pead> <title> Use Image exchange technology to create a CSS hover menu </title> <style type = "text/css"> div # spritemenu {height: 50px; width: 400px; font-size: 9px; background-image: url (http://files.jb51.net/demoimg/200911/spritemenu.gif); overflow: hidden;} div # spritemenu ul li {display: inline; margin: 0px; padding: 0px;} div # spritemenu ul li a {display: block; position: relative; height: 50px;} div # spritemenu ul li a: hover {background-image: url (http://files.jb51.net/demoimg/200911/spritemenu.gif);} div # spritemenu ul {margin: 0px; padding: 0px; list-style-type: none; height: 50px;} div # spritemenu span {display: none;} div # spritemenu li. buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;} div # spritemenu li. buttonB a {top:-50px; left: 82px; width: 64px; background-position:-82px 0px;} div # spritemenu li. buttonC a {top:-100px; left: 148px; width: 76px; background-position:-148px 0px;} div # spritemenu li. buttonD a {top:-150px; left: 226px; width: 70px; background-position:-226px 0px;} div # spritemenu li. buttonE a {top:-200px; left: 298px; width: 102px; background-position:-298px 0px;} div # spritemenu li. buttonA a: hover {background-position: 0px-50px;} div # spritemenu li. buttonB a: hover {background-position:-82px-50px;} div # spritemenu li. buttonC a: hover {background-position:-148px-50px;} div # spritemenu li. buttonD a: hover {background-position:-226px-50px;} div # spritemenu li. buttonE a: hover {background-position:-298px-50px ;} </style> </pead> <body> <ul> <li class = "buttonA"> Home </li> <li class = "buttonB"> About </li> <li class = "buttonC"> Contact </li> <li class = "buttonD"> Forum </li> <li class = "buttonE"> Guestbook </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
