Rumah > hujung hadapan web > html tutorial > 鼠标放在 img上 变成另一张图片,移走鼠标又变回原来的_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 12:18:26
asal
2959 orang telah melayarinya

鼠标放在 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="/static/imghw/default1.png"  data-src="Image/menuContractUs.jpg"  class="lazy"     onmousemove="this.className='contract1'" onmouseout="this.className='contract'"/ alt="鼠标放在 img上 变成另一张图片,移走鼠标又变回原来的_html/css_WEB-ITnose" ></a>            </li>        </ul>    </div>    </form></body></html>
Salin selepas log masuk

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


回复讨论(解决方案)

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>
Salin selepas log masuk









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="/static/imghw/default1.png"  data-src="Image/menuContractUs.jpg"  class="lazy"     onmousemove="this." onmouseout="this."  / alt="鼠标放在 img上 变成另一张图片,移走鼠标又变回原来的_html/css_WEB-ITnose" ></a>
Salin selepas log masuk


这样就行了 

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan