点击链接后需要更改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');
});

Demo

Answer 2

你可以看看这个答案： Getting dimensions of background-image
如何获得背景图像的维度。

在元素中添加'onclick'事件，
并使用jquery设置元素的背景图像大小。