タブでマウスを動かすと画像が変わります

Question

私はその中に画像があるタブを持っていますので、その画像を別の画像に変更してからタブを選択して選択してから、それを元の画像に戻します。あなたが置くと
/私が取得したいタブを選択しIcon20.pngからの画像の変更が ここ
タブ

$('#one').hover(function(){ 
 
      $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})}, 
 
function(){ 
 
    $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'}) 
 
}); 
 
$('#one').click(function(){ 
 
      $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})}, 
 
function(){ 
 
    $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'}) 
 
});

div.tab { 
 
\t overflow: hidden; 
 
\t border: 1px solid #336699; 
 
\t background-color: #336699; 
 
\t font-family: "Lato", "Sans-Serif"; 
 
} 
 
div.tab button { 
 
\t background-color: #336699; 
 
\t float: left; 
 
\t border: #FFF; 
 
\t outline: none; 
 
\t cursor: pointer; 
 
\t padding: 14px 16px; 
 
\t transition: 0.3s; 
 
\t color: #fff; 
 
\t font-family: "Lato", "Sans-Serif"; 
 
\t font-size: 20px; 
 
\t font-style: normal; 
 
\t font-weight: 400; 
 
\t line-height: 22px; 
 
} 
 
div.tab button:hover { 
 
\t background-color: #FFFFFF; 
 
\t color:#336699; 
 
} 
 

 
div.tab button.active { 
 
\t background-color: #fff; 
 
\t color:#336699; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab"> 
 
<button id="one" class="tablinks" aria-label="LDS Vacuum Shopper Links" > 
 
<img src="https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png" height="20" width="20" title="LDS Logo" id="two" name="two"> 
 
\t \t Vacuum Shopper 
 
\t </button> 
 
    </div>

のコードですIcon10.pngします

更新日：私はこれらのJSFiddleのを検索した後：First JSFiddleとSecond JSFiddle と私は両方の要素を組み合わせてコードスニペットでJQueryを作成しました。 First JSFiddleとSecond JSFiddle を、私はコードスニペットではJQueryを作るために、それらの両方の要素を組み合わせた：

Answer 1

周りに検索した後、私はこれらのJSFiddleのを見つけました。

$('#one').hover(function(){ 
     $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})}, 
function(){ 
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'}) 
}); 
$('#one').click(function(){ 
     $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})}, 
function(){ 
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'}) 
});