Ändern Sie die Etiketten- und Bildopazität, wenn das Optionsfeld aktiviert ist?

Question

Ich habe seit ungefähr einer Stunde damit zu kämpfen und ich bin mir nicht sicher, was der beste Ansatz ist. Ich habe einen Radioknopf, der ein Etikett und ein Bild hat. Was ich möchte, ist, dass der Radio-Button, das Label und das Bild anfänglich eine Deckkraft von 0,4 Prozent haben und wenn der Benutzer ein Optionsfeld anklickt, setze die Deckkraft auf 1,0.

Hier ist, was ich bis jetzt habe, habe versucht, Klassen mit JavaScript/jQuery zu ändern, aber ich würde dies mit reinem CSS tun, wenn möglich.

Mein Optionsfeld HTML (beachten Sie, dass diese in einer Tabelle sitzen):

<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> 

Meine CSS:

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

Das gibt mir die gewünschte Wirkung, wenn alles nicht aktiviert ist, aber wenn Wenn Sie eine Optionsschaltfläche markieren, ist nur die Optionsschaltfläche selbst auf die Deckkraft von 1.0 zurückgesetzt. Wie kann ich die anderen Klassen im aktivierten Status angeben? Ich versuchte , .radio-image, .radio-heading,, aber das hat nicht funktioniert.

Answer 1

Diese CSS versuchen, Nutzen Sie Selector Geschwister (+), die die label wählt und seine untergeordneten Klassen Opazität auf 1 gesetzt

dies ein Versuch geben

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; 
} 

Hoffnung hilft.