Question

我使用图像作为单选按钮：

                <label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick="validate()"> <img src="assets/images/basis.png"  height="75"> </label>
                <label class="radio-inline thumbs"><input type="radio" id="type_ja" name="type" value="ja" onkeyup="validate()" onclick="validate()"> <img src="assets/images/bottom.png" height="75"> </label>

我正在隐藏单选按钮：

   input[type=radio]:not(old){
      width   : 28px;
      margin  : 0;
      padding : 0;
      opacity : 0;
    }

图像透明：

.thumbs{opacity:0.5;}

我想在单击图像（=单选按钮）时删除不透明度过滤器。使用哪个CSS选择器？我试过了

.thumbs:active{opacity:1;}

和

.thumbs:checked{opacity:1;}

没有结果。有关如何在检查图像（=单选按钮）时删除不透明度过滤器的任何建议吗？

Answer 1

我的示例，只需更改HTML和CSS

input[type=radio]:not(old){
   width   : 28px;
   margin  : 0;
   padding : 0;
   opacity : 0;
}

.thumbs{opacity:0.5;}

.testchecked:checked + label > img {opacity:1;}

<input type="radio" id="type_nee" class="testchecked" name="type" value="nee">
<label for="type_nee" class="radio-inline">
  <img class="thumbs" src="assets/images/basis.png"  height="75">
</label>

<input type="radio" id="type_ja" class="testchecked" name="type" value="ja">
<label for="type_ja" class="radio-inline">
  <img class="thumbs" src="assets/images/bottom.png" height="75"></label>

选中单选按钮时的CSS选择器

1 个答案: