Wie kann ich die Deckkraft des Bildes von id Master auf 1 ändern, wenn ich die Option mit dem Wert 1 (MasterCard) auswähle? und es in eine Funktion einfügen, die mit diesen 4 Werten arbeitet, jeder mit seiner eigenen ID? Ich möchte, dass das Standardbild 0,3 hat und wenn eine der Optionen ausgewählt ist, hat das Bild eine Deckkraft von 1.
.itemForm2 { width: 100%; position: relative; margin-bottom: 18px; margin-top: 10px; display: flex; flex-direction: row; } .escolhaCartao { display: flex; flex-direction: row; width: 218px!important; gap: 10px; } @media(min-width:768px) { .escolhaCartao { width: 258px!important; height: 34.32px; gap: 5px; } .lineFormCartao { display: flex; flex-direction: row; justify-content: inherit; gap: 16px; } .escolhaCartao img { opacity: .3; } }
<div class="lineForm lineFormCartao"> <div class="itemForm"> <select id="OpcoesCartao" name="OpcoesCartao"> <option value="1">Mastercard</option> <option value="2">Visa</option> <option value="3">Elo</option> <option value="4">Amex</option> </select> </div> <div class="itemForm2 escolhaCartao"> <img id="master" src="images/master.png" alt="Logo cartão Mastercard"> <img id="visa" src="images/visa.png" alt="Logo cartão Visa"> <img id="elo" src="images/elo.png" alt="Logo cartão Elo"> <img id="amex" src="images/amex.png" alt="Logo cartão Amex"> </div> </div>
仅使用 CSS 和 has
使用 JavaScript
你可以这样做。这适用于大多数浏览器。 Firefox 应该很快就会支持它 (https://caniuse.com/?search=has) p>