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

希望这有助于..

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

1 个答案: