如何在选中状态下保留 CSS 变换比例

Question

我正在寻找一种仅 CSS 的简单方法来创建 :hover scale 转换，以根据 :checked 状态保留其规模。这就是我所追求的：

目前，我示例中的 itemB 在 :hover 上有一个 scale(2)，工作正常。我的问题是，当项目为 checked 时，我似乎无法想出一个 CSS-only 保留比例的方法（这些图标由隐藏的单选按钮）。

这是我正在使用的 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。我用 li input[type="radio"]:checked + label img 的比例 1 试过了，它成功了。

Answer 2

选中状态

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

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

示例fiddle：

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

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

如何在选中状态下保留 CSS 变换比例

How to retain CSS transform scale on checked state

css

css-transitions

css-transforms

选中状态

示例fiddle：