个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我在单个页面中有 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>编辑
圆 Angular 、大小、位置和文字
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 - 如何在html和css中点击切换图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30023239/
25
4
0
我需要你的帮助!我在它们之间放置了随机数量的 div。 Item description Item description Item description Item
我有两个 NSDates，时间格式为“h:mm a”(即 6:00 AM 和 8:00 PM)。 我试图找出这两个时间之间的中点是什么时间。 对于上面的示例，早上 6:00 和晚上 8:00 之间的中
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
我正在寻找一种有效的算法来检查一个点是否在 3D 中的另一个点附近。 sqrt((x2-x1)^2 + (y2-y1)^2 + (z2-z1)^2) < radius 这似乎并不太快，实际上我不需要这
我可以让 pandas cut/qcut 函数返回 bin 端点或 bin 中点而不是一串 bin 标签吗？ 目前 pd.cut(pd.Series(np.arange(11)), bins = 5)
我是一名优秀的程序员,十分优秀！