元画像上にホバリングしたときの背景画像の表示

Question

元画像にマウスを乗せたときに背景画像を表示し、元の画像上にホバーオーバーしなくなったときに背景画像が消えるようにしています。以下は私のHTMLとCSSのスニペットです。 「オリジナル画像を隠す」または「背景画像を表示する」という簡単なCSSコマンドはありませんか？

.wildlife img { 
 
\t padding:0; 
 
\t margin:0; 
 
\t width:48%; 
 
\t height:auto; 
 
\t float:left; 
 
\t background-image: url("http://placekitten.com/300/200"); 
 
}

<div class="wildlife"> 
 
\t \t \t 
 
<a href=""><img src="http://placekitten.com/g/300/200" /></a> 
 
\t \t \t 
 
</div>

Answer 1

前述したように、あなたはこれを達成するためにJSを使用することができます。あなたはそのようにそれを置くと、あなたが<a>タグにスタイルを追加することができます

http://jsfiddle.net/wbox6khc/52/

<div class="wildlife"> 

<a href=""><img src='http://placekitten.com/g/300/200' onmouseover="this.src='http://placekitten.com/300/200';" onmouseout="this.src='http://placekitten.com/g/300/200';"/></a> 

Answer 2

：

.wildlife a { 
 
    background: url('http://placekitten.com/300/200') no-repeat 0 0 scroll; 
 
    display: inline-block 
 
} 
 

 
.wildlife a img { 
 
    display: inline-block; 
 
} 
 

 
.wildlife a:hover img { 
 
    visibility: hidden; 
 
}

<div class="wildlife"> 
 
    <a href="#"> 
 
    <img src="http://placekitten.com/g/300/200" alt="kitty"> 
 
    </a> 
 
</div>

下記のリンクでの例を参照してください。

JSは必要ありません。

Answer 3

純粋なCSSを使用することはできますが、divにはwidthとheightを設定する必要があります。下のスニペットを確認してください。

.wildlife{ 
 
    width:300px; 
 
    height: 300px; 
 
    float:left; 
 
    content:""; 
 
    background: url("http://placekitten.com/300/200") no-repeat; 
 
    background-size:cover; 
 
    background-position: center center; 
 
    transition: all 0.4s; 
 
    -webkit-transition: all 0.4s; 
 
    cursor: pointer; 
 
} 
 
.wildlife:hover{ 
 
    background: url("http://placekitten.com/g/300/200") no-repeat; 
 
    background-size:cover; 
 
    background-position: center center; 
 
}

<div class="wildlife"> 
 
</div>