点击链接后需要更改td的背景图片大小

Question

I have a site and I want have here logos of some games with links in them. I done this all even with changing size of image while on hover. And what I need is that the size stayed bigger after clicking on that link. Is that possible? Can't find anything simple fot that. Only some jQuery and javascript codes for background color. Here is the code:

<table id="containerlogos" style="width: 1200px; height: 150px;">
    <tr>
        <td id="pkmn"><a href="http://www.pkmnpro.cz"></a></td>
        <td id="ygo"><a href="http://www.ygopro.cz"></a>
        </td>
        <td id="mtg"><a href="http://www.mtgpro.cz"></a>
        </td>
        <td id="hs"><a href="http://www.svet-karet.cz/?page_id=7"></a></td>
    </tr>
</table>

and the css:

#containerlogos {
    position: relative;
    z-index: 3;
}    
#pkmn {
    background: url("http://www.svet-karet.cz/img/pkmn.png") no-repeat top;
    width: 150px;
    height: 100px;
    background-size: auto 60px;
    float: left;
    padding-left: 20px;
}    
#pkmn:hover {
    animation: pkmn 0.115s linear;
    -webkit-animation: pkmn 0.115s linear;
    background-size: auto 80px;
    position: relative;
}
#pkmn a {
    display: block;
    height: 80px;
    width: auto;
}
/*YGO logo*/
#ygo {
    background: url("http://www.svet-karet.cz/img/ygo.png") no-repeat top;
    width: 200px;
    height: 100px;
    background-size: auto 60px;
    float: left;
    position:relative;
    margin-right: 20px;
}
#ygo:hover {
    animation: ygo 0.115s linear;
    -webkit-animation: ygo 0.115s linear;
    background-size: auto 80px;
    position: relative;
}
#ygo a {
    display: block;
    height: 100px;
    width: auto;
}
/*mtg logo*/
#mtg {
    background: url("http://www.zdenekriha.eu/img/mtg.png") no-repeat top center;
    width: 215px;
    height: 100px;
    background-size: auto 40px;
    float: left;
    position: relative;
    margin-left: -50px;
    top: 10px;
}
#mtg:hover {
    animation: mtg 0.115s linear;
    -webkit-animation: mtg 0.115s linear;
    background-size: auto 60px;
    position: relative;
}
#mtg a {
    display: block;
    height: 80px;
    width: auto;
}
/*HS LOGO*/
#hs {
    background: url("http://www.zdenekriha.eu/img/hs.png") no-repeat top;
    width: 280px;
    height: 150px;
    background-size: auto 80px;
    float: left;
    position: relative;
    margin-left: -25px;
    top:-12px;
}
#hs:hover {
    animation: hs 0.115s linear;
    -webkit-animation: hs 0.115s linear;
    background-size: auto 100px;
    position: relative;
}
#hs a {
    display: block;
    height: 80px;
    width: auto;
}
@-webkit-keyframes pkmn {
    0% {
    background-size: auto 60px;
    position: relative;
}
25% {
    background-size: auto 65px;
    position: relative;
}
50% {
    background-size: auto 70px;
    position: relative;
}
75% {
    background-size: auto 75px;
    position: relative;
}
99% {
    background-size: auto 80px;
    position: relative;
}
100% {
    background-size: auto 80px;
    position: relative;
    -webkit-animation-play-state:paused;
}
}

@-webkit-keyframes ygo {
    0% {
    background-size: auto 60px;
    position: relative;
}
25% {
    background-size: auto 65px;
    position: relative;
}
50% {
    background-size: auto 70px;
    position: relative;
}
75% {
    background-size: auto 75px;
    position: relative;
}
99% {
    background-size: auto 80px;
    position: relative;
}
100% {
    background-size: auto 80px;
    position: relative;
    -webkit-animation-play-state:paused;
}
}

@-webkit-keyframes mtg {
    0% {
    background-size: auto 40px;
    position: relative;

}
25% {
    background-size: auto 45px;
    position: relative;

}
50% {
    background-size: auto 50px;
    position: relative;

}
75% {
    background-size: auto 55px;
    position: relative;

}
99% {
    background-size: auto 60px;
    position: relative;
}
100% {
    background-size: auto 60px;
    position: relative;
    -webkit-animation-play-state:paused;
}
} 
@-webkit-keyframes hs {
    0% {
    background-size: auto 80px;
    position: relative;

}
25% {
    background-size: auto 85px;
    position: relative;

}
50% {
    background-size: auto 90px;
    position: relative;

}
75% {
    background-size: auto 95px;
    position: relative;

}
99% {
    background-size: auto 100px;
    position: relative;
}
100% {
    background-size: auto 100px;
    position: relative;
    -webkit-animation-play-state:paused;
}
} 

Here is the working version http://jsfiddle.net/3ZmCh/117/

Answer 1

Try this:

$('#containerlogos a').on('click', function (event) {
    event.preventDefault();
    $(this).closest('td').css('background-size','auto 80px');
});

Demo

Answer 2

You can look at this answer: Getting dimensions of background-image
on how to get the dimension of background image.

Add a 'onclick' event to your elements,
and use jquery to set the element's background image size.