divにホバリングしたときに別の画像が表示される

この問題を解決する方法については多くの方法を試しましたが、解決策が見つからないようですので、経験豊かな人から助けを求めるときです。は基本的に私が何をしたい私は、IMGがであることをその「DIV」（箱）の上に置くと、変更するイメージのためのコードを見てください：。divにホバリングしたときに別の画像が表示される

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 

      body { 
      background: grey; 
      } 

      #box { 
       margin: 0 auto; 
       width: 300px; 
       height: 300px; 
       background: blue 
      } 
      #box img { 
       display: block; 
       margin: 0 auto; 
       padding-top: 75px; 
      } 
     </style> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <a href="#"> 
      <div id="box"> 
       <img src="registration_icon_white.png" onmouseover="src='registration_icon_black.png'" onmouseout="'registration_icon_black.png'"> 
      </div> 
     </a> 
    </body>

（画像は、同じですただ異なる色で）

おかげさまで、ありがとうございます。

出典

2017-09-21 Michael

あなたはjavascriptやより良いはjqueryの、まだ使用できますか？ – rjustin

あなただけdivの背景に画像を置くことができます。

DEMO

<div id="box"></div>

More on CSS background

#box { 
    background: url("registration_icon_black.png"); 
    height: 500px; 
} 

#box:hover{ 
    background: url("registration_icon_white.png"); 
}

出典

2017-09-22 02:32:44 Ari

URLを割り当てるsrcを指定していません。 onmouseoverイベントとonmouseoutイベントでthis.src='URL'を使用する必要があります。ここで

はthisキーワードのリンクです： How does the "this" keyword work?

出典

2017-09-21 23:57:49 Christopher

div "ボックス"上にマウスを置いたときに変更するには、onmouseoverイベントとonmouseoutイベントをdivに移動し、実行するコードにimgタグを指定させます。「

」 – Christopher

はthis.srcで試してみてください。

<div id="box">    
     <img title="some title" src="registration_icon_white.png" 
      onmouseover="this.src='registration_icon_black.png'" 
      onmouseout="this.src='registration_icon_white.png'"> 
    </div>

出典

2017-09-22 00:03:27

これは適切な方向へのステップです。ありがとうございます。画像自体ではなくボックスの上にカーソルを置くと、これをどのように引き起こすことができるのか分かりますか？ – Michael

これを行うにはjavascript（またはJQuery）が必要です。 –

divにホバリングしたときに別の画像が表示される

答えて

関連する問題