我可以使用输入检查来启动突出显示图像的 CSS 吗？

Question

我有一个安全表单，我想在检查输入时突出显示图像的一部分。我可以通过悬停来突出显示图像的一部分，但我似乎无法通过使用 Checked 的 CSS 来做到这一点。有什么我想念的想法吗？如果我将 css tropic:checked 切换为悬停，那么它将突出显示我的选择。问题是我无法通过检查获得相同的功能。有可能吗？

谢谢！

<style>
.check-with-label:checked ~ .product-add-image-preview {
 position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;

}

.circle-with-label:checked ~ .add-head {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
.circle-with-label:checked ~ .add-head {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.trPic{ 
width:320px; 
height:700px; 
background: url(<?php echo base_url('uploads/front_body.png'); ?>) no-repeat; 
border:5px solid #000000; } 
.trPic .head{ 
position:relative; 
top:10px; 
left:100px;
width:60px; 
height:30px; 
background:#FF2400; 
opacity:0; } 
.trPic:checked .head { 
opacity:0.7; }

</style>

<div align="center">

<?php if( !function_exists('form_open')): ?>
    <?php $this->load->helper('form'); ?>
<?php endif;?>

<?php echo form_open(current_url(),array('id'=>'form')); ?>


        <?php echo form_label('Head','head'); ?>
    <input type="checkbox" name ="head" id="head" class="head" value="1"/>       
        <?php echo form_label('Face','face'); ?>
        <input type="checkbox" name ="face" id="check_1" class="check-with-label" value="1" />


        <?php echo form_fieldset_close(); ?>

    <br />

<br />
<br />
<br />
<?php echo form_button(array('name'=>'submit','type'=>'submit','value'=>1,'content'=>'Submit')); ?>

</div>
<div class ="trPic">
<div class="head">
</div>
</div>

Answer 1

您可以使用 jQuery 并调用 addClass() 在选中框的事件中添加包含所需样式的类。