Home >Web Front-end >HTML Tutorial >Put the mouse on the img and it will become another picture. Remove the mouse and it will change back to the original_html/css_WEB-ITnose
Put the mouse on the img and it will become another picture. Remove the mouse and it will change back to the original_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:262922browse
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> The above is the code. Can you experts check what is wrong? Thank you.
Reply to the discussion (solution)
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> 740a19ac27c6da68c85cb79be9ff9e14 x" target="_blank" onmousemove ="this.className='contract1'" onmouseout="this.className='contract'" class="contract">5db79b134e9f6b82c0b36e0489ee08ed 🎜> 16b28748ea4df4d9c2150843fecfba68
080b747a20f9163200dd0a7d304ba388
*{margin:0;padding:0;}
#form2 a{display:block; width:310px;height:220px;}
.contract{background:url(images/1.png)}
.contract1{background:url(images/2.png)}
src:url(Image/menuOnContractUs.jpg), there is no src style
Write an example and take a look at it
XML/HTML code?12345678910 #a1 div{ width:200px; height: 50px; background:url(http://www.baidu.com/img/baidu_jgylogo3.gif) no-r...
Or use css to embed js script to achieve it
Thank you all upstairs, it’s done
That’s it