2016-11-16 3 views
-2

このコードは正しく動作せず、適切なURLと電子メールアドレスが明白でないことを尋ねなければなりません。私はそれを上にマウスを置くとすぐに別のものと交換する写真を取得しようとしています。また、それをアクティブな写真にしたいので、クリックすると電子メールのポップアップウィンドウが表示されます。私のCSSコードがうまくいかず、画像が表示されません

<!DOCTYPE html> 
    <div> 
     <br/> 
    </div> 
    <html> 
    <head> 
    <style type="text/css"> 
    .imgBox1 
    { 
     width: 333px; 
     height: 416px; 
     background-image: url(DSC_0267-Edit.jpg) no-repeat; 
    } 
    .imgBox1:hover 
    { 
     width: 333px; 
     height: 416px; 
     background-image: url(DSC_0267-Edit-Edit%202.jpg) no-repeat; 
    } 
    </style> 
    </head> 
    <body> 
    <a href="mailto:[email protected]"> 
    <div class="imgBox1"> 
    </div> 
    </a> 
    </body> 
    </html> 
+0

SOOOOO、どのような動作しませんか? – nicovank

+3

なぜ 'html'タグの前に' div'がありますか? – Turnip

+2

こんにちは、歓迎、StackOverflowへ。ヘルプページ、特に[ここではどのトピックについて聞かせていただけますか?](http://stackoverflow.com/help/on-topic)と[質問しないでください。」](http://stackoverflow.com/help/dont-ask)。さらに重要なことは、[Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922)をお読みください。また、[最小、完全、および検証可能な例](http://stackoverflow.com/help/mcve)についても知りたいことがあります。 – secelite

答えて

1

背景画像から背景を使用するようにCSSを変更します。詳細については、チェックアウトのバックグラウンドCSSルールdocumentation on MDNをご覧ください。

.imgBox1 { 
 
    width: 333px; 
 
    height: 416px; 
 
    background: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat; 
 
} 
 
.imgBox1:hover { 
 
    width: 333px; 
 
    height: 416px; 
 
    background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37_2x.png); 
 
}
<a href="mailto:[email protected]"> 
 
    <div class="imgBox1"></div> 
 
</a>

関連する問題