ホームページ > 記事 > ウェブフロントエンド > 画像にマウスを置くと別の画像になります。マウスを外すと、original_html/css_WEB-ITnose に戻ります。
画像にマウスを置くと別の画像になります。マウスを外すと、original_html/css_WEB-ITnose に戻ります。
- WBOYオリジナル
- 2016-06-24 12:18:262897ブラウズ
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'"/></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> 740a19ac27c6da68c85cb79be9ff9e14 ; 2 a{ 表示:ブロック;幅:310px;高さ:220px;}
.contract{background:url(images/1.png)}
src:url(画像) /menuOnContractUs.jpg)、src スタイルはありません
サンプルを書いてください
XML/HTML code?12345678910 #a1 div{ width:200px height:50px; .com/img/baidu_jgylogo3.gif) no-r……
a:hover 機能を使うと便利です。
または、CSS を使用して js スクリプトを埋め込んでそれを実現します
上の階の皆さん、ありがとうございます。完了しました
れーい
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。