Question

我有一排选项分别是复选框和图像。当用户选择图像或复选框以边框突出显示图像时，我希望使用它。或者我可以使用纯CSS实现此功能？

这是一个片段

<style>


.highlight {
    opacity: 0.7;
}

.highlight:hover {
    opacity: 1;
}  

</style>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="checkbox" name="question_1_1" value="1" style="
    /* display: none !important; */"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1a.png" alt="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="checkbox" name="question_1_2" value="1" style="
    /* display: none !important; */"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1b.png" alt="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>

Answer 1

您的意思是这样吗？您可以使用CSS相邻的兄弟选择器

.highlight {
  opacity: 0.7;
}

.highlight:hover {
  opacity: 1;
}

.wpProQuiz_questionInput:checked + img {
  border: 1px solid #f00;
}

<li class="wpProQuiz_questionListItem" data-pos="0">
  <span style="display:none;">1. </span>
  <label for="1">
<input id="1" class="wpProQuiz_questionInput" type="checkbox" name="question_1_1" value="1"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1a.png" alt="pic1" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
  <span style="display:none;">1. </span>
  <label for="2">
<input id="2" class="wpProQuiz_questionInput" type="checkbox" name="question_1_2" value="1"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1b.png" alt="pic2" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>

Answer 2

如果要使点击生效，则必须使用：

.highlight:active,.highlight:focus {
        border:1px solid red;
}

css突出显示所选<input />框的图像

2 个答案: