コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

画像にマウスを置くと別の画像になります。マウスを外すと、original_html/css_WEB-ITnose に戻ります。

WBOY
リリース： 2016-06-24 12:18:26
オリジナル
2894 人が閲覧しました

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>
ログイン後にコピー

; 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 スクリプトを埋め込んでそれを実現します

上の階の皆さん、ありがとうございます。完了しました
れーい

以上です

関連ラベル：
鼠标放在 img上 变成另一张图片，移走鼠标又变回原来的
ソース：php.cn
前の記事：ヘルプ: FLASH は常に他のレイヤーをブロックします_html/css_WEB-ITnose 次の記事：IEとのレイアウト互換性がない問題 - width_html/css_WEB-ITnoseが足りない
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1872
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2039
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1715
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1616
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1629
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート