ホバリング可能な画像

私は、写真といくつかの宣伝を含むチームページを持っているシナリオを持っています。各画像の下に、私は非常に次のようなソーシャルメディアへのリンクを持っている：ホバリング可能な画像

これらは、以下のベースのマークアップを使用して、各項目の下に水平リストに座るイメージです。

<ul> 
    <li> 
     <a><img src=""/></a> 
    </li> 
    <li> 
     <a><img src=""/></a> 
    </li> 
</ul>

現時点ではこれらの画像ですが、これらの画像の灰色の部分が青色になっている場合、私は非常に好きです。

私はちょうどこのような背景画像とスパン持って考えていた：私はこれをしようとしたときのスペースではなく、画像の大きさを取るの空だった、しかし

<a><span class="linkedin"></span></a> 

.linkedin{ 
height:28px; 
width:auto; 
background-image:url(link/to/the/linkedin/picture) 
} 

.linkedin:hover{ 
    height:28px; 
    width:auto; 
    background-image:url(link/to/the/linkedin/picture-blue-version) 
    }

を。

私は背景画像の小さな部分を取得するコンテンツとしてを入力した場合、さらにクラスに絶対位置を与えること

FLOS文書からそれを取るには、これは理想的なアプローチですか？

出典

2017-11-06 Jesse Orange

実際には "解決策"そのものではありませんが、私は[Font Awesome]（http://fontawesome.io/）のようなアイコンフォントを使用します。フォントの色を変更するだけで、アイコンの色を変更できます。それは本当に社会的なアイコンをはるかに簡単にします。 –

問題は、あなたが<span>要素を使用する場合はdisplay: inline-blockに設定する必要があり、あなたがする必要があります

.linkedin { 
 
    display: inline-block; 
 
    width: 140px; 
 
    height:100px; 
 
    background-image:url(http://ipsumimage.appspot.com/140x100,ff7700) 
 
} 
 

 
.linkedin:hover { 
 
    background-image:url(http://ipsumimage.appspot.com/140x100,0000FF) 
 
}

<a href="#"><span class="linkedin"></span></a>

あなたが最初に見たよう：それはここでは、作品のデモで表示する画像のためwidthを設定それはちらつきます。最初に:hoverの画像が読み込まれないためです。このため、別のソリューションを検討する必要があります。いくつかのコメントで述べたように、http://fontawesome.io/icons/を使用して、色を変更するだけです。

<img>タグを使用して同じことを行うと、ちらつきを防ぐため、ソースがロードされ、:hoverに表示されます。しかし、それはまた、設定位置で最適に動作し、そのようにデモ：

a.special { 
 
    position: relative; 
 
} 
 

 
a.special img { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
a.special img:first-child { 
 
    visibility: visible; 
 
} 
 

 
a.special:hover img:first-child { 
 
    visibility: hidden; 
 
} 
 

 
a.special:hover img:last-child { 
 
    visibility: visible; 
 
}

<a class="special" href="#"> 
 
    <img src="http://ipsumimage.appspot.com/140x100,ff7700"> 
 
    <img src="http://ipsumimage.appspot.com/140x100,0000FF"> 
 
</a>

出典

2017-11-06 16:04:37 caramba

これは非常に巧妙な解決策です。背景の画像を設定したり使用したりする必要がないので、面白いです。代替テキストなどを追加することができます。 –