檢查單選按鈕時更改標籤和圖像的不透明度？

我一直在爲此奮鬥了大約一個小時，我不確定最佳方法是什麼。我有一個單選按鈕，它有一個標籤和一個圖像。我想要的是單選按鈕，標籤和圖像最初爲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,，但沒有奏效。

來源

2017-07-22 user2573690

嘗試這個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

希望這會有幫助..

來源

2017-07-23 01:51:10

檢查單選按鈕時更改標籤和圖像的不透明度？

回答

相關問題