如何在点击html和css时切换图像

我在一个页面中有9个图像,并且布局看起来像9个图像的网格.当我点击图像时,我有一个想要用作每个图像边框的图像.这是一个带边框的透明图像,就像确认图像的选择一样.

我怎样才能实现这一点？当我点击图像时,当我点击图像边框图像应该消失时,边框图像会反复出现.

有没有办法只使用HTML和CSS来实现它

.image1 {
    left: 786 px;
    top: 629 px;
    position: absolute;
    width: 441 px;
    height: 243 px;
    float: left;
}

.image2 {
    left: 1284 px;
    top: 629 px;
    position: absolute;
    width: 441 px;
    height: 243 px;
    float: left;
}

.image3 {
    left: 289 px;
    top: 920 px;
    position: absolute;
    width: 441 px;
    height: 243 px;
    float: left;
    }
    <html>

<body>
    <div class="image1">
        <img src="images/image1.png" />
    </div>
    <div class="image2">
        <img src="images/image2.png" />

    </div>

    <div class="image3">
        <img src="images/image3.png" />
    </div>
</body>

</html>

解决方法

试试css伪代码.

使用复选框进行多选

input.switch-border {
  display: none;
}
input.switch-border + label > img {
  border: 2px solid transparent;
  cursor: pointer;
}
input.switch-border:checked + label > img {
  border-color: grey;
}

<input type='checkBox' class='switch-border' id='r1' />
<label for='r1'>
  <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' />
</label>
<input type='checkBox' class='switch-border' id='r2' />
<label for='r2'>
  <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' />
</label>

单选用无线电

input.switch-border {
  display: none;
}
input.switch-border + label > img {
  border: 2px solid transparent;
  cursor: pointer;
}
input.switch-border:checked + label > img {
  border-color: grey;
}

<input type='radio' class='switch-border' id='r1' name='switch' />
<label for='r1'>
  <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' />
</label>
<input type='radio' class='switch-border' id='r2' name='switch' />
<label for='r2'>
  <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' />
</label>

编辑

圆角,大小,定位和放大文本

input.switch-border {
  display: none;
}
input.switch-border + label {
  border: 2px solid transparent;
  border-radius: 10px;
  /* rounded corners */
  -moz-border-radius: 10px;
  /* FF */
  -webkit-border-radius: 10px;
  /* chrome */
  cursor: pointer;
  padding: 5px 7px;
}
input.switch-border + label > img {
  width: 100px;
  /* size */
  height: 100px;
  /* size */
}
input.switch-border:checked + label {
  border-color: grey;
}
label[for=r2] {
  float: right;
}
label[for=r1] {
  float: left;
}

<input type='radio' class='switch-border' id='r1' name='switch' />
<label for='r1'>
  <span>Image Desc</span>
  <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' />
</label>
<input type='radio' class='switch-border' id='r2' name='switch' />
<label for='r2'>
  <span>Image Desc</span>
  <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' />
</label>

附： css属性border-radius不适用于IE< 9

如何在点击html和css时切换图像

解决方法

相关推荐