Question

我有一个收音机列表，其中的按钮已被两个图像替换。取消选中时，imgFront可见，选中后，imgBack可见。目的是使用CSS变换翻转图像以显示其他想象。怎么会这样做？

HTML：

<div class="switch">
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" />
    <label id="Label1" for="cmn-toggle-1">
         <img id="imgFront1" src="~/Content/img/Categories/Refuse.png" width="65" height="65"/>
         <img id="imgBack1" src="~/Content/img/Categories/RefuseLabel.png" width="65" height="65" class="hidden"/>
   </label>
</div>
<div class="switch">
    <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" />
    <label id="Label2" for="cmn-toggle-2">
         <img id="imgFront2" src="~/Content/img/Categories/Water.png" width="65" height="65"/>
         <img id="imgBack2" src="~/Content/img/Categories/WaterLabel.png" width="65" height="65" class="hidden"/>
   </label>
</div>
<div class="switch">
    <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" />
    <label id="Label3" for="cmn-toggle-3">
         <img id="imgFront3" src="~/Content/img/Categories/Building.png" width="65" height="65"/>
         <img id="imgBack3" src="~/Content/img/Categories/BuildingLabel.png" width="65" height="65" class="hidden"/>
   </label>
</div>

CSS：

/* ============================================================
  COMMON
============================================================ */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* ============================================================
  SWITCH 3 - YES NO
============================================================ */
input.cmn-toggle-yes-no + label {
  padding: 2px;
  width: 120px;
  height: 60px;
}
input.cmn-toggle-yes-no + label::before, input.cmn-toggle-yes-no + label::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
input.cmn-toggle-yes-no + label::before {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label::after {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label::before {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label::after {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

JS：

 $(document).ready(function() {
        $('input[name=category]:radio').change(function() {
            if(this.checked==true){
               //do something
            }
            else{
                //doo something else
            }
        });
    });

Answer 1

如果您只想在所选单选按钮上切换图像，则可以大大简化CSS。

在您的HTML中，将id代码中的所有label > img属性更改为class="imgFront"和class="imgBack"，如下所示：

<div class="switch">
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" />
    <label id="Label1" for="cmn-toggle-1">
         <img class="imgFront" src="~/Content/img/Categories/Refuse.png" width="65" height="65"/>
         <img class="imgBack" src="~/Content/img/Categories/RefuseLabel.png" width="65" height="65"/>
   </label>
</div>
<div class="switch">
    <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" />
    <label id="Label2" for="cmn-toggle-2">
         <img class="imgFront" src="~/Content/img/Categories/Water.png" width="65" height="65"/>
         <img class="imgBack" src="~/Content/img/Categories/WaterLabel.png" width="65" height="65"/>
   </label>
</div>
<div class="switch">
    <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" />
    <label id="Label3" for="cmn-toggle-3">
         <img class="imgFront" src="~/Content/img/Categories/Building.png" width="65" height="65"/>
         <img class="imgBack" src="~/Content/img/Categories/BuildingLabel.png" width="65" height="65"/>
   </label>
</div>

您也可以将class="hidden"放在＆＃34;返回＆＃34;图片。除非在不同的CSS中定义和需要该类，否则这里并没有真正使用它。

在你的CSS中，离开COMMON部分并删除其他所有内容。然后，三个简单的CSS规则将处理图像翻转。您的CSS应该如下所示：

/* ============================================================
  COMMON
============================================================ */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================================
  RADIO BUTTON IMAGE FLIPPING WHEN SELECTED
============================================================ */         
.switch > label > .imgBack {
    display: none;
}

.switch > input[type='radio']:checked + label > .imgFront {
    display: none;
}

.switch > input[type='radio']:checked + label > .imgBack {
    display: block;
}

你的JavaScript很好，虽然这里不需要图像翻转。如果您在选择其中一个单选按钮时需要处理其他活动，请保留它，否则您可以将其删除。

应该这样做。如果你想用CSS添加更多花哨的过渡，你当然可以做到这一点。此解决方案将使用纯CSS为您执行图像交换。

翻转单选按钮更改时的图像

1 个答案: