Question

在这里，我想在单击时显示图像图标的边框颜色。我有3个具有默认边框设置的图像。我正在寻找在单击时显示图标边框颜色，例如切换每个图标。这是fiddle

    .img-border {
      padding:5px;
      border:1px solid #db9c31;
      // background-color:#ff0;
    }

   <div class="row header">
      <div class="col-3">
        <a class="align-middle no-padding" title="Home">
          <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer" width="30px"
            height="30px">
        </a>
        <a class="align-middle no-padding" title="Home">
          <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer" width="30px"
            height="30px">
        </a>
        <a class="align-middle no-padding" title="Home">
          <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer" width="30px"
            height="30px">
        </a>
      </div>

Answer 1

我相信，如果您努力尝试，肯定会找到有关该主题的一些答案。但为您提供这种方法的示例，请使用look at this fiddle

我已更改的内容：

添加了一个新的img类，用于存储填充和基本边框大小
仅使用img-border类切换边框颜色（如果删除整个边框，图像将跳1px）
添加了一个快速的JS示例，说明如何进行切换（这与生产代码和浏览器不兼容。这只是该方法的一个示例）

以下是JS供参考：

const links = document.querySelectorAll('a');

links.forEach(link => {
  link.addEventListener('click', function(ev) {
    ev.preventDefault();
    const img = this.querySelector('img');
    img.classList.toggle('img-border');
  })
})

单击切换时显示图像的边框

1 个答案: