bootstrap选中图片后的勾选样式

短命女 2022-08-31 07:15 168阅读 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：代表绿色的勾

鼠标不悬浮时显示图片

![20210723174136503.png][]

鼠标悬浮时

![20210723174229618.png][]

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

[20210723174136503.png]: /images/20220829/df279cc93d21417785116eb896e64409.png
[20210723174229618.png]: /images/20220829/b6c05acf93044bbb9461b71097b8a653.png

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui-table中勾选框部分勾选的暂时解决办法

layui-通过table进行状态勾选，但是在表格中有部分是启动的状态，启动状态下不能够被勾选。如下：单选已启用的会失败 ![2021043010395956.png][

我会带着你远行/ 2023年01月18日 02:20/ 0 赞/ 407 阅读

相关 element-ui单选框按钮的样式改成勾勾

![2021092514224379.png][]默认的单选框的样式是这样的我想换成图标是勾勾的。 ![20210925142343103.png][] // 全

偏执的太偏执、/ 2022年09月12日 12:52/ 0 赞/ 464 阅读

相关 Bootstrap：文字排版与图片样式

Bootstrap4 文字排版默认设置： Bootstrap 4 默认的 `font-size` 为 16px, `line-height` 为 1.5。默认

痛定思痛。/ 2022年09月01日 14:57/ 0 赞/ 311 阅读

相关 bootstrap选中图片后的勾选样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

短命女/ 2022年08月31日 07:15/ 0 赞/ 169 阅读

相关 JQuery中checkbox勾选/取消勾选的诡异问题（attr和prop）

\1.使用attr()实现勾选的问题 //HTML伪代码 <form> 你爱好的运动是？<input type="checkbox" id="Che

约定不等于承诺〃/ 2022年06月14日 02:10/ 0 赞/ 288 阅读

相关 jQuery 控制勾选和去勾选

input ratio勾选控制 $("id").prop("checked",true); //勾选 $("id").prop("chec

桃扇骨/ 2022年05月18日 08:13/ 0 赞/ 261 阅读

相关点击radio后面的文字勾选框选中

在开发过程中会发现，必须点击圆圈圈的时候才能触发选中，这种体验不是很好，下面是两种点击后面的文字时触发的勾选。第一种： <form action="">

亦凉/ 2022年05月16日 14:08/ 0 赞/ 267 阅读

相关 BootStrap-table 复选框默认选中（checkbox）

bootstrap table colums 写法 var columns = \[\{ field : ‘checked’,

￡神魔★判官ぃ/ 2022年05月14日 10:35/ 0 赞/ 263 阅读

相关复选框被选中但勾没出来

checkbox标签已有checked=checked但是不显示勾选，查看图片：于是乎就开始网上查找，

今天药忘吃喽~/ 2021年10月08日 06:04/ 0 赞/ 394 阅读

相关 BootStrap3--图片样式、形状

响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:

阳光穿透心脏的1/2处/ 2021年08月13日 15:03/ 0 赞/ 434 阅读