suchen

Heim >Web-Frontend >HTML-Tutorial >鼠标放在 img上 变成另一张图片，移走鼠标又变回原来的_html/css_WEB-ITnose

鼠标放在 img上 变成另一张图片，移走鼠标又变回原来的_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:18:262924Durchsuche

鼠标放在 img上  变成另一张图片，移走鼠标又变回原来的，怎么实现不了啊 代码如下： 

<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'"/ alt="鼠标放在 img上 变成另一张图片，移走鼠标又变回原来的_html/css_WEB-ITnose" ></a>            </li>        </ul>    </div>    </form></body></html>

上面是代码，各位高手看看哪里错了，谢谢 


回复讨论(解决方案)

src:url(Image/menuOnContractUs.jpg)，没有src的样式
写个例子你看下 

 #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>

             
                           
  •               
                 
    •          
     
 

src:url(Image/menuOnContractUs.jpg)，没有src的样式
写个例子你看下
XML/HTML code?12345678910 #a1 div{   width:200px;   height:50px;   background:url(http://www.baidu.com/img/baidu_jgylogo3.gif)  no-r……


使用a:hover功能，这个方便。

或者用css嵌js脚本的办法实现

谢谢楼上的各位，搞定了  

               <img   src="Image/menuContractUs.jpg"  onmousemove="this.src='Image/menuOnContractUs.jpg'" onmouseout="this.src='Image/menuContractUs.jpg'"  / alt="鼠标放在 img上 变成另一张图片，移走鼠标又变回原来的_html/css_WEB-ITnose" ></a>


这样就行了 

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求救：FLASH总会挡住其它层的问题_html/css_WEB-ITnoseNächster Artikel：布局不兼容IE的问题－宽度不够_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen