Question

我在一个页面中有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>

Answer 1

尝试使用css伪代码。

使用复选框进行多项选择

＆＃13;

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

＆＃13;

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

＆＃13;

使用无线电进行单选

＆＃13;

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

＆＃13;

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

＆＃13;

<强> 修改

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

＆＃13;

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

＆＃13;

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

＆＃13;

P.S。 css属性border-radius不适用于IE＆lt; 9

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

1 个答案: