如何在已检查状态下保留CSS变换比例

Question

我正在寻找一种简单的纯CSS方式来创建:hover scale转换，并根据:checked状态保留其比例。这就是我追求的目标：

目前，我的示例中的itemB在scale(2)上有:hover，效果很好。我的问题是，当项目为checked时，我似乎无法提出仅限CSS 保留比例的方法（这些图标由隐藏的单选按钮支持）。

这是我正在使用的HTML结构：

...
<ul>
    <li>
        <input type="radio" id="itemA" />
        <label class="icon" for="itemA">
            <img src="..." />
        </label>
    </li>
    <li>
        <input type="radio" id="itemB" />
        <label class="icon" for="itemB">
            <img src="..." />
        </label>
    </li>
    <li>
        <input type="radio" id="itemC" />
        <label class="icon" for="itemC">
            <img src="..." />
        </label>
    </li>
</ul>
...

和我的CSS：

li input[type="radio"] + label img {
    width: 50px;
    margin: 50% auto;
    transition: all .3s;
}

li:hover input[type="radio"] + label img {
    transform: scale(2);
}

我认为最简单的方法是为已检查状态添加另一个选择器：

li input[type="radio"]:checked + label img {
    transform: scale(2);
}

但这似乎不起作用，我无法弄清楚原因。有什么想法吗？请不要jQuery或其他JS建议。我只想使用CSS3来完成这个简单的效果。谢谢你的帮助。

Answer 1

你在第二个区块中的比例也是2.我尝试使用比例1进行输入[type =＆＃34; radio＆＃34;]：选中+标签img并且它有效。

Answer 2

检查状态

将选中状态添加到输入元素应该保持图像上的比例 检查代码：

 li input[type="radio"]:checked + label img {
  transform: scale(2);
  transform-origin: center left;
}

示例小提琴：

＆＃13;

＆＃13;

ul {} li input[type="radio"] + label img {
  width: 50px;
  transition: all .3s;
}
li:hover input[type="radio"] + label img {
  transform: scale(2);
  transform-origin: center left;
}
li input[type="radio"]:checked + label img {
  transform: scale(2);
  transform-origin: center left;
}

＆＃13;

<ul>
  <li>
    <input type="radio" id="itemA" />
    <label class="icon" for="itemA">
      <img src="http://www.lorempixel.com/50/50" />
    </label>
  </li>
  <li>
    <input type="radio" id="itemB" />
    <label class="icon" for="itemB">
      <img src="http://www.lorempixel.com/50/50" />
    </label>
  </li>
  <li>
    <input type="radio" id="itemC" />
    <label class="icon" for="itemC">
      <img src="http://www.lorempixel.com/50/50" />
    </label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;