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

Question

我有一个网站，我想在这里找到一些带有链接的游戏徽标。 即使悬停时更改了图像大小，我也完成了所有这些操作。 我需要的是单击该链接后，尺寸保持更大。 那可能吗？ 找不到简单的东西。 仅一些jQuery和javascript代码提供背景颜色。 这是代码：

<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>

和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;
}
} 

这是工作版本http://jsfiddle.net/3ZmCh/117/

Answer 1

尝试这个：

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

演示

Answer 2

您可以看一下以下答案： 获取背景图像的尺寸
关于如何获取背景图像的尺寸。

在您的元素中添加一个“ onclick”事件，
并使用jquery设置元素的背景图片大小。