html - 选中单选按钮时更改标签和图像不透明度？

Question

我已经为此苦苦挣扎了大约一个小时，我不确定最好的方法是什么。我有一个带有标签和图像的单选按钮。我希望单选按钮、标签和图像最初的不透明度为 0.4%，当用户选中单选按钮时，将不透明度设置为 1.0。

这是我目前所做的，我尝试使用 JavaScript/jQuery 更改类，但如果可能的话我想使用纯 CSS 来完成。

我的单选按钮 HTML(请注意，它位于表格中):

<td class="answer">
    <!-- <div id="radio-<%= question.id %>" onclick="test('radio-grp-<%= question.id %>', 'outline-<%= question.id %>-r-<%= tmp %>','q-<%= question.id %>-r-<%= tmp %>')"> -->
    <div id="radio-<%= question.id %>">    
            <div class="radio-btn">  
            <!-- <div id="outline-<%= question.id %>-r-<%= tmp %>" class="radio-btn">   -->
            <input id="q-<%= question.id %>-r-<%= tmp %>" type="radio" name="radio-grp-<%= question.id %>" >
            <label for="q-<%= question.id %>-r-<%= tmp %>">
                <img src="/images/signal.png" class="radio-image">
                <p class="radio-heading"><%= question.choiceAnswer[tmp][0] %></p>
                <p class="radio-detail"><%= question.choiceAnswer[tmp][1] %></p>
            </label>
            </div>  
        </div> 
</td>

我的 CSS:

.radio-btn input[type="radio"], .radio-image, .radio-heading, .radio-detail {
    opacity: 0.4;
}
.radio-btn input[type="radio"]:checked {
    opacity: 1.0;
}

当一切都未选中时，这会给我带来预期的效果，但是，当您选中单选按钮时，只有单选按钮本身的不透明度恢复为 1.0。如何指定处于选中状态的其他类？我尝试了 、.radio-image、.radio-heading, 但没有用。

Answer 1

试试这个 CSS，使用同级选择器 (+)，它选择 label 并将其子类的不透明度设置为 1。

试一试

CSS

.radio-btn input[type="radio"]:checked + label .radio-image,
.radio-btn input[type="radio"]:checked + label .radio-heading,
.radio-btn input[type="radio"]:checked + label .radio-detail
{
  opacity:1.0;
}

Working Fiddle

希望这有帮助..