a：hoverを使用してHTMLで画像を切り替える最も良い方法は？

Question

私はウェブサイトのナビゲーションのために左パネルを構築しようとしています。少し問題があります。私はもともと、パネル（ボタン、ウェルカム、サービス、ポートフォリオ、FAQ、連絡先）を作成するCSSを使用していましたが、その下にはアフィリエイトリンクも必要でした。

ここはあなたのイメージです。

http://prntscr.com/atci5k

私はボタンを作成するためにCSSを使用していた、私は使用することができた：背景色を変更するにはホバーが、私はテキストが背景内で垂直中心に得ることができませんでした、と私はcouldnサイズ変更時のクリッピングを止めるようにしてください。

私はそれを置き換えるイメージを作成しようとしましたが、これでa：hoverがwelcome.png w/welcome2.pngを置き換えて、ホバーで背景が暗くなるようにしたいと思います。

はここのコードです：

<div class="leftpanelPics"> 
     <a id="change" href="#" > <img src="images/nav/welcome.png"> </a> 
     <a id="change" href="services.html"><img src="images/nav/services.png"></a> 
     <a id="change" href="portfolio.html"><img src="images/nav/portfolio.png"></a> 
     <a id="change" href="faq.html"><img src="images/nav/faq.png"></a> 
     <a id="change" href="contact.html"><img src="images/nav/contact.png"></a> 
    </div> 

<p class="text text-1"><span>Affiliations:</span></p> 

<div class="leftpanelPics"> 
     <a href="https://www.findmyorganizer.com/"><img src="images/logos/FMO_Logo.png"></a> 
     <a href="http://www.iocp.org/"><img src="images/logos/IOCP_Logo.png"></a>  
     <a href="https://www.stjude.org/"> <img src="images/logos/St_Jude_Logo.png"></a>  
</div> 


<p class="text text-1"><span>Social Media:</span></p> 
<div class="socialmedia"> 
      <a href="https://www.twitter.com/"> <img src="images/socialmedia/twitterlogo.png"></a> 
      <a href="https://www.facebook.com/"> <img src="images/socialmedia/facebooklogo.png"></a> 
      <a href="https://www.instagram.com/"> <img src="images/socialmedia/instagramlogo.png"></a>     
      <a href="https://www.pinterest.com/"> <img src="images/socialmedia/pinterestlogo.png"></a> 
      <a href="https://www.linkedin.com/"> <img src="images/socialmedia/linkedinlogo.png"></a> 
</div> 

`

任意の助けいただければ幸いです。

おかげ

編集

CSS：

a:hover img { 
    content:url("http://lorempicsum.com/futurama/255/200/2"); 
} 

：

.leftpanel { 
    position: relative; 
    float: left; 
    clear: both; 
    z-index: 10; 
    width: 20.4%; 
    height: 1199px; 
    margin-left: 10%; 
    vertical-align: middle; 


} 

.leftpanel .text { 
    min-height: 14px; 
    margin-left: 6.5%; 
} 


.body a.leftpanelPics:hover { 
    color: darkcyan; 
    width: 150%; 
} 

.leftpanelPics { 
    float: left; 
    clear: both; 
    width: 68%; 
    height: auto; 
    margin: 7px 0 0 13%; 


} 
.leftpanelPics img{ 
    width: 100%; 
    float: left; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    border: 1px #0d1e6e solid; 
    box-shadow: 0px -1px 20px rgba(0,0,0,.9); 
} 




.leftpanel { 
    position: relative; 
    float: left; 
    clear: both; 
    z-index: 10; 
    width: 20.4%; 
    height: 1199px; 
    margin-left: 10%; 
    vertical-align: middle; 


} 

.leftpanel .text { 
    min-height: 14px; 
    margin-left: 6.5%; 
} 


.body a.leftpanelPics:hover { 
    color: darkcyan; 
    width: 150%; 
} 

.leftpanelPics { 
    float: left; 
    clear: both; 
    width: 68%; 
    height: auto; 
    margin: 7px 0 0 13%; 


} 
.leftpanelPics img{ 
    width: 100%; 
    float: left; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    border: 1px #0d1e6e solid; 
    box-shadow: 0px -1px 20px rgba(0,0,0,.9); 
} 

Answer 1

リンク自体のクラスを作成することができます。例えば

<a class="welcome" href="#" ></a> 

CSS：

.welcome { 
margin-bottom: 10px; 
width: 160px; 
height:160px; 
display:block; 
background:transparent url('images/nav/welcome.png') center top no-repeat; 
} 

.welcome:hover { 
    background-image: url('images/nav/welcome2.png'); 
} 

Answer 2

a:hoverにimgのロールオーバーを作成するには、次のように行うことができます

しかし、すべてのブラウザで完全に互換性がありません（1年前の最後の編集）。 SOにこの答えを参照してください。

https://stackoverflow.com/a/11484688/6028607

それをを行うための他の方法、より互換性1、この

a { position: relative; display: inline-block; } 
a:hover:before { 
    content:""; 
    position: absolute; 
    left: 0; right: 0; bottom: 0; top: 0; 
    background:url("http://lorempicsum.com/futurama/255/200/2") no-repeat #fff; 
} 

See a working fiddle of this solutionのようなリンクのホバー上で擬似的要素を使用することです