When the mouse is placed on img, it changes to another picture, and when the mouse is removed, it changes back to the original one. Why can’t this be achieved? The code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title> <style> .contract { src:url(Image/menuContractUs.jpg) } .contract1 { src:url(Image/menuOnContractUs.jpg) } </style> </head><body> <form id="form1" runat="server"> <div> <ul> <li> <a href="Index.aspx" target="_blank"><img src="Image/menuContractUs.jpg" onmousemove="this.className='contract1'" onmouseout="this.className='contract'"/></a> </li> </ul> </div> </form></body></html>
src:url(Image/menuOnContractUs.jpg), no src style
Write an example for you to see
#a1 div{ width:200px; height:50px; background:url(http://www.baidu.com/img/baidu_jgylogo3.gif) no-repeat ; } #a1:hover div{ background:url(http://www.google.com.hk/images/srpr/logo3w.png) no-repeat ; } </style> <a href="#" id="a1"><div></div></a>
Or use css to embed js script to achieve it
Thank you all upstairs, it’s done
That’s it