Question

我有以下CSS：

.images_container input[type="checkbox"]:checked > label { border-color:#4378c3; opacity:1.0; }
.images_container input[type="checkbox"] > label:hover { opacity:1.0; }
.images_container input[type="checkbox"] { display:block; }

这是我的HTML

<div class="sale_image_container">
    <input type="checkbox" id="<?=$result_id?>_checkbox" value="<?=$result_id?>" name="product[]" />
    <div style="display:table-cell; vertical-align:bottom;" />
        <label style="background-image:url(<?=$img?>)" class="sale_image" for="<?=$result_id?>_checkbox">
            <div class="jpg_name_bg">
                <div class="jpg"><?=$result_jpg?></div>
                <img src="images/expand.png" onClick="expandImage('<?=$img?>')" />
                <img src="images/fx.png" onClick="applyEffects('<?=$result_jpg?>')" />
            </div>
        </label>
    </div>
</div>

出于某种原因，前两种样式根本不起作用...当选中复选框时，标签应该应用该样式...

Answer 1

input[type="checkbox"] > label:hover表示label是input type=checkbox的直接孩子。这不是你的HTML的样子。而且根本不可能，因为input不能有任何孩子。

您可以尝试使用+在div旁边获取input，然后>获取label：

.images_container input[type="checkbox"] + div > label:hover { opacity:1.0; }

CSS“＆gt;”选择器不工作，也不是“〜”

1 个答案: