如何在單擊復選框時旋轉所有 3 張圖片？
我正在嘗試，~但它只影響復選框所在的影像。
HTML：
<div class="img-wrapper">
<img class="img" src="https://via.placeholder.com/300" />
</div>
<div class="img-wrapper">
<input class="checkbox" type="checkbox" id="rotate">
<label class="label-checkbox" for="rotate">Rotate</label>
<img class="img" src="https://via.placeholder.com/300" />
</div>
<div class="img-wrapper">
<img class="img" src="https://via.placeholder.com/300" />
</div>
SCSS:
.checkbox:checked {
~ .img {
transform: rotate(180deg);
}
}
uj5u.com熱心網友回復：
你可以用javascript來做，像這樣：
if ($("#rotate").is(':checked')) {
$(".img-wrapper img").css("transform", "rotate(180deg)");
}
或者
if ($("#rotate").is(':checked')) {
$(this).parent().find("img").css("transform", "rotate(180deg)");
}
其他選項 :has
https://caniuse.com/?search=:has
uj5u.com熱心網友回復：
如果我們:has()今天有偽選擇器，它可能是
.something:has(input:checked) img {
transform: rotate(180deg);
}
至于我們還沒有，你應該取消它的復選框
<input class="checkbox" type="checkbox" id="rotate">
<div class="img-wrapper">
<img class="img" src="https://via.placeholder.com/300" />
</div>
<div class="img-wrapper">
<label class="label-checkbox" for="rotate">Rotate</label>
<img class="img" src="https://via.placeholder.com/300" />
</div>
<div class="img-wrapper">
<img class="img" src="https://via.placeholder.com/300" />
</div>
然后你可以選擇<img>s 使用
input:checked ~ .img-wrapper > img {
transform: rotate(180deg);
}
您可以通過隱藏原始<input>和樣式來繪制自定義復選框<label>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366464.html