bootstrap选中图片后的勾选样式

最新推荐文章于 2024-01-25 10:56:55 发布

shenhaibb_

最新推荐文章于 2024-01-25 10:56:55 发布

阅读量615

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/shenhaibb_/article/details/119041018

版权

JAVA 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
		</script>
		<style>
			.mask {
				position: absolute;
				background: rgba(101, 101, 101, 0.4);
				opacity: 0;
				top: 0;
				border-radius: 10px;
				cursor: pointer;
			}

			.row div:hover .mask {
				opacity: 1;
			}

			.select {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-md-1">
				<img src="1.png" class="img-thumbnail" alt="图标" style="border-radius: 10px">
				<div class="mask" onclick="chooseIcon($(this))">
					<img src="select.png" alt="选中图片" style="margin: 15px">
				</div>
			</div>
		</div>
	</body>
	<script>
		function chooseIcon(obj) {
			obj.toggleClass("select")
		}
	</script>
</html>

1.png：代表要勾选的图片

select.png：代表绿色的勾

鼠标不悬浮时显示图片

鼠标悬浮时

选中后，就保持悬浮时候的样式

shenhaibb_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap选中图片后的勾选样式

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script type="text/javascript.
复制链接

扫一扫