Morgan Ng Morgan Ng - 2 months ago 7
CSS Question

How to set after onclick it include image and div span contents in JQUERY

I have a code using CSS sprite , as the code is working although i clicking on the image and the whole div contents change color include the contents word . But when i clicking on the contents word which stacked with images indeed the contents word does the changes of the color but the images still remain as the same without changing to blue.

Can we do it in 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>





Image of the div :

enter image description here

Answer

Change your html code that way, that the span which holds the text will be the child element of the label, that way, clik on the text will also be click on the label which will change the check state of the input, and your css will change too:

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

Here is an example, I changed also your css a little bit:

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

Comments