Html css以突出显示选定对象的图像<；输入>；箱

我有一行选项，分别是复选框和图像。。我希望当用户选择图像或复选框时，它会突出显示带有边框的图像或其他内容。。我可以用纯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>

.亮点{
不透明度：0.7；
}
.亮点：悬停{
不透明度：1；
}  

1.


1.

你是说像这样？您可以使用css相邻同级选择器

。突出显示{
不透明度：0.7；
}
.亮点：悬停{
不透明度：1；
}
.wpproquick\u问题输入：选中+img{
边框：1px实心#f00；
}

数据pos=“0”>
1.


1.

如果您希望在单击时生效，则必须使用：

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