css 从窗体中选择选项时更改图像不透明度

laik7k3q 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(68)

我如何才能使当我选择的选项，具有值1（万事达卡）的图像与id主更改不透明度为1？并把它放在一个功能，适用于两个4值，每个上与他自己的id？默认的图像，我希望它是0. 3，当选择的选项之一的图像具有不透明度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

来源：https://stackoverflow.com/questions/75996654/change-image-opacity-when-select-an-option-from-a-form

2条答案

按热度按时间

4ioopgfo1#

你可以像这样做。这在大多数浏览器中都可以工作。Firefox应该很快就会支持它（https://caniuse.com/?search=has）

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

.lineForm:has( option[value="1"]:checked ) #master {
  opacity: 1;
}
.lineForm:has( option[value="2"]:checked ) #visa {
  opacity: 1;
}
.lineForm:has( option[value="3"]:checked ) #elo {
  opacity: 1;
}
.lineForm:has( option[value="4"]:checked ) #amex {
  opacity: 1;
}

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

赞(0）回复(0）举报 2023-04-13

vxbzzdmp2#

只使用CSS和has

.escolhaCartao img {
 opacity: .2;
}

.itemForm:has(option[value="1"]:checked) + .itemForm2 > #master,
.itemForm:has(option[value="2"]:checked) + .itemForm2 > #visa,
.itemForm:has(option[value="3"]:checked) + .itemForm2 > #elo,
.itemForm:has(option[value="4"]:checked) + .itemForm2 > #amex
{
  opacity: 1;
}

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

使用JavaScript

var sel = document.querySelector("#OpcoesCartao");
const imgs =  document.querySelectorAll(".escolhaCartao img");

sel.addEventListener("change", function (e) {
  const val = this.value;
  const selected = document.querySelector(".escolhaCartao img.selected");
  if (selected) {
    selected.classList.remove('selected');
  }
  imgs[+val - 1].classList.add('selected');
});

sel.dispatchEvent(new Event('change'));

.escolhaCartao img {
 opacity: .2;
}

.escolhaCartao img.selected
{
  opacity: 1;
}

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

赞(0）回复(0）举报 2023-04-13

我来回答

css 从窗体中选择选项时更改图像不透明度

2条答案

相关问题

热门标签

最新问答