[英]Need change background-image size of td after clicking on link
我有一個網站,我想在這里找到一些帶有鏈接的游戲徽標。 即使懸停時更改了圖像大小,我也完成了所有這些操作。 我需要的是單擊該鏈接后,尺寸保持更大。 那可能嗎? 找不到簡單的東西。 僅一些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;
}
}
嘗試這個:
$('#containerlogos a').on('click', function (event) {
event.preventDefault();
$(this).closest('td').css('background-size','auto 80px');
});
您可以看一下以下答案: 獲取背景圖像的尺寸
關於如何獲取背景圖像的尺寸。
在您的元素中添加一個“ onclick”事件,
並使用jquery設置元素的背景圖片大小。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.