When you hover on a tab then an image changes

Question

I have a tab with an image inside of it and I want to make it so when you hover/select the tab the image changes to a different image and then when you unselect/ unhover it changes back to the original image.
When you hover/select on the tab I want to get the image changes from Icon20.png to Icon10.png
Here is the code for the tab

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

div.tab button.active {
 background-color: #fff;
 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"> 
  Vacuum Shopper
 </button>
  </div>

UPDATE: After searching around I found these JSFiddle's: First JSFiddle and Second JSFiddle and I combined elements from both of them to make the JQuery in the code snippet.

On SO, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)**. — Rob, Oct 02 '17 at 17:56
This is an age old question that has been answered many times. You need to use `:hover` and a sprite image. — hungerstar, Oct 02 '17 at 18:00
Possible duplicate of [Changing image on hover with CSS/HTML](https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) — hungerstar, Oct 02 '17 at 18:03
You should then create an answer to your question and post it in the Answer section below. — Rob, Oct 02 '17 at 18:34

score 0 · Accepted Answer · answered Oct 02 '17 at 18:43

After searching around I found these JSFiddle's: First JSFiddle and Second JSFiddle and I combined elements from both of them to make the JQuery in the code snippet.

$('#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)'})
});

FWIW, this is a convoluted solution to an image rollover. Use CSS and image sprites. You should also include the markup that this JS is being applied to if you're going this route so future users have a more _"functional"_ example to reference. — hungerstar, Oct 02 '17 at 19:35

When you hover on a tab then an image changes

1 Answers1