アイテムブロックをホバリングしたときのアイコンイメージの交換

Question

cssを使用してクラス名のアイテムでdivをホバーすると、別のアイコンイメージを変更するにはどうすればよいですか？私はこれを試しました：.item：hover .icon img { background-image：url（ './ images/moon.png'）; }でも動作しません。何か案が？

<div class="col-md-4 item"> 
    <span class="icon"><img alt="" class="img-responsive" src="./images/sun.png"></span> 
    <h3>This is text</h3> 
    <p>Some text...</p> 
    <p><a class="btn btn-primary" href="#">go</a></p> 
</div> 

Answer 1

まず、あなたの質問に直接私の答え：ホバーで

が0にタグの不透明度を設定し、span.iconにあなたの新しい背景画像を保持します。あなたのコードをリファクタリングする場合

.icon { display: inline-block } 
.icon:hover { background-image: url(...); } 
.icon:hover .img-responsive { opacity: 0; } 

は、ここではいくつかのソリューションがあり、https://codepen.io/xavortm/pen/QOBrRK

今デモこちらを参照してください。

1. <img>タグを削除し、background-imageをスパンに使用してください。前と同じようにホバリングで変更してください
2. 同じサイズの画像を2つ保存してください。あなただけの画像タグを削除し、background-imageプロパティでオペラコミックとしてスパンを設定し、これを行うにはJavaScriptを必要としない

Answer 2

（私は、このオプションを好きではない）ホバー上の第一/第二トグル
の例を参照してください

.item 
 
{ 
 
background-color:#fff; 
 
} 
 
.item span.icon { 
 

 
width:60px; 
 
height:60px; 
 
display:block; 
 
background-image:url('https://png.pngtree.com/element_pic/00/16/06/25576e094d32c0e.jpg'); 
 
background-size:100%; 
 
background-color:#fff; 
 
} 
 
.item:hover span.icon 
 
{ 
 
background-image:url('http://moziru.com/images/moon-clipart-evening-12.jpg'); 
 
}

<div class="col-md-4 item"> 
 
    <span class="icon"></span> 
 
    <h3>This is text</h3> 
 
    <p>Some text...</p> 
 
    <p><a class="btn btn-primary" href="#">go</a></p> 
 
</div>

Answer 3

background-image CSSプロパティで<img>タグを交換してください。次に、hoverプロパティで、あなたがホバーしたい画像クラスに応じて異なる不透明度を割り当てます。

表示される画像は、高い不透明度（最大1）を有するべきであり、不透明度を隠すためにあなたがimgタグに背景画像を設定していない0