How to install after onclick it includes image and contents of span div in jquery

Question

I have a code using CSS sprite, as the code works, although I click on the image, and the whole color of changing the contents of the div includes the content of the word. But when I click on the containing word that fits with the images, the content of the content word itself changes color, but the images remain unchanged without changing the blue color.

Can we do this in the jquery method to make this function work?

/*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("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
  background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 {
  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
  background-image: url("http://placehold.it/150x100/?text=Image2");
}

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab1 current">
      <input type="radio" name="imgSwap" id="rdoImg1">
      <label class="topimgG1" for="rdoImg1"></label>
      <span>编辑精选</span>
    </li>
    <li class="tab2 current">
      <input type="radio" name="imgSwap" id="rdoImg2">
      <label class="topimgG2" for="rdoImg2"></label>
      <span>编辑精选</span>
    </li>
  </ul>
</div>

Run codeHide result

Image div:

Answer 1

html- , span, , , , , , css :

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab2 current">
      <label class="topimgG2" for="rdoImg2">
         <input type="radio" name="imgSwap" id="rdoImg2">
         <span>编辑精选</span>      
      </label>
    </li>
  </ul>
</div>

, css:

.games-sub-menu input[type=radio] {
  display: none
}

.games-sub-menu label {
  display: block;
  width: 150px;
  height: 100px;
  margin-bottom: 2em;
}

.games-sub-menu label.topimgG1 span::before {
  display:block;
  width: 100%;
  content: "\00a0";
  height: 100%;
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu label.topimgG2 span::before {
  display:block;
  width: 100%;
  content: "\00a0";
  height: 100%;
  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu label.topimgG1 input[type=radio]:checked + span::before {
  background-image: url("http://placehold.it/150x100/?text=Image1");
}

.games-sub-menu label.topimgG2 input[type=radio]:checked +  span::before {
  background-image: url("http://placehold.it/150x100/?text=Image2");
}

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab1 current">
      <label class="topimgG1" for="rdoImg1">
        <input type="radio" name="imgSwap" id="rdoImg1">
        <span>编辑精选</span>        
      </label>
    </li>
    <li class="tab2 current">
      <label class="topimgG2" for="rdoImg2">
        <input type="radio" name="imgSwap" id="rdoImg2">
        <span>编辑精选</span>        
      </label>
    </li>
  </ul>
</div>

Hide result

Answer 2

click , .

jQuery class class, .

-

.games-sub-menu label.topimgG1Clicked {
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=ImageChangedImage");
}

javascript click :

$(this).closest('label').removeClass('topimgG1');
$(this).closest('label').removeClass('topimgG1Clicked');