Question

当我选中相关按钮时，我正在尝试更改组中每个单选按钮旁边的图像的背景颜色。我使用了以下HTML和CSS：

.option-choice:checked img.img-thumbnail {
    background-color: #004990 !important;
    border-color: red;
}

<div class="radio">
    <label>
        <input class="option-choice" name="option[227]" value="18" type="radio">
         <img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
    </label>
</div>

然而CSS不起作用，图像保持不变。这可能是我的CSS不正确，还是不可能这样做？

Answer 1

此..

.option-choice:checked img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}

假设图片是input的后代，而不是。{/ p>

使用 Adjacent Sibling 选择器+

.option-choice:checked + img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}

Answer 2

您的选择器必须为.option-choice:checked + img.img-thumbnail：

＆＃13;

.option-choice:checked + img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}

＆＃13;

<div class="radio">
  <label>
    <input class="option-choice" name="option[227]" value="18" type="radio">
     <img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
     </label>
</div>

＆＃13;

更改选中的单选按钮旁边的图像样式

2 个答案: