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

WBOY
Release: 2016-06-24 12:18:26
Original
2893 people have browsed it

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>
Copy after login

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>
Copy after login

                                                        x" target="_blank" onmousemove ="this.className='contract1'" onmouseout="this.className='contract'" class="contract">                                                      🎜>