Onclick'te span etiketi içindeki bir görüntü nasıl sığar?

Question

Yayılma etiketinde bir resmim var. Ama sorun, resmin yayılma etiketinin içine sığmamasıdır. Bunun yerine resmin bir kısmı yayılma etiketinin dışına gider.

Kelime açıklığını onclick yaparken, görüntü rengini değiştirdiğimde, resmin rengini değiştirdiğimde, metnin rengini değiştirir. Kodumda yanlış bir şey var.

Bunu nasıl başarabilirim?

MY HTML:

<div class="games-platform-item pt-item"> 
<ul class="games-sub-menu clearfix"> 
<li class="tab1 current"> 
    <!-- <img src="../images/abc11.jpg"/ class="topimgG1" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg1"> 
    <label class="topimgG1" for="rdoImg1"></label> 
    <span>编辑精选</span> 
</li> 
<li class="tab2"> 
    <div> 
     <!-- <img src="../images/abc2.jpg"/ class="topimgG2" "> --> 
     <input type="radio" name="imgSwap" id="rdoImg2"> 
     <label class="topimgG2" for="rdoImg2"></label> 
     <span>老虎机</span> 
    </div> 
</li> 
<li class="tab3"> 
    <!-- <img src="../images/abc3.jpg"/ class="topimgG3" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg3"> 
    <label class="topimgG3" for="rdoImg3"></label> 
    <span>桌面游戏</span> 
</li> 
<li class="tab4"> 
    <!-- <img src="../images/abc4.jpg"/ class="topimgG4" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg4"> 
    <label class="topimgG4" for="rdoImg4"></label> 
    <span>累计大奖</span> 
</li> 
<li class="tab5"> 
    <!-- <img src="../images/abc5.jpg"/ class="topimgG5" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg5"> 
    <label class="topimgG5" for="rdoImg5"></label> 
    <span>小游戏</span> 
</li> 
<li class="tab6"> 
    <!-- <img src="../images/abc6.jpg"/ class="topimgG6" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg6"> 
    <label class="topimgG6" for="rdoImg6"></label> 
    <span>视频扑克</span> 
</li> 
<li class="tab7"> 
    <!-- <img src="../images/abc7.jpg"/ class="topimgG7" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg7"> 
    <label class="topimgG7" for="rdoImg7"></label> 
    <span>所有游戏</span> 
</li> 

MY CSS:

/*Hide the Radio Button*/ 

.games-sub-menu input[type=radio] { 
    display: none 
} 
/*Set a box for the label, this is what is clicked on*/ 

.games-sub-menu label { 
    display: block; 
    width: 150px; 
    height: 100px; 
} 
/*Set Images...this would work better with sprites*/ 

.games-sub-menu label.topimgG1 { 
    background-image: url("../images/abc1.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 820px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG1 { 
    background-image: url("../images/abc1_onclick.jpg"); 
} 
.games-sub-menu label.topimgG2 { 
    background-image: url("../images/abc2.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 690px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG2 { 
    background-image: url("../images/abc2_onclick.jpg"); 
} 
.games-sub-menu label.topimgG3 { 
    background-image: url("../images/abc3.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 560px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
    clear: both; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG3 { 
    background-image: url("../images/abc3_onclick.jpg"); 
} 
.games-sub-menu label.topimgG4 { 
    background-image: url("../images/abc4.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 430px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG4 { 
    background-image: url("../images/abc4_onclick.jpg"); 
} 
.games-sub-menu label.topimgG5 { 
    background-image: url("../images/abc5.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 305px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG5 { 
    background-image: url("../images/abc5_onclick.jpg"); 
} 
.games-sub-menu label.topimgG6 { 
    background-image: url("../images/abc6.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 18 5px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG6 { 
    background-image: url("../images/abc6_onclick.jpg"); 
} 
.games-sub-menu label.topimgG7 { 
    background-image: url("../images/abc7.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 43px; 
    top: 5px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG7 { 
    background-image: url("../images/abc7_onclick.jpg"); 
} 

Answer 1

Ben o görüntünün o üzerine onclick zaman onclick kelime yayılma üzerinde o resim rengini süre değiştirdiğinizde sahip olmak istiyorum metninin rengini değiştirir. Doğru Soru yorumlamak durumunda

, sen {css img böyle deneyin for nitelik önceki <input type="checkbox"> elemanını

input { 
 
    display: none; 
 
} 
 
label { 
 
    width: 50px; 
 
    height: 30px; 
 
    background: blue; 
 
    display: block; 
 
} 
 
:checked + label + label { 
 
    background: red; 
 
    color: white; 
 
} 
 
:checked + label { 
 
    background: green; 
 
}

<input type="checkbox" id="1"> 
 
<label for="1"></label> 
 
<label for="1">text</label>