我在一个页面中有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>
小智 5
试试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>border-radius对于IE <9,PS css属性不起作用