15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 CSS

鼠标点击切换:before的样式

王永康| 发布于 2021-07-21 22:09:03| 575阅读| 0点赞| 0评论
举报

有的地方图片用的是伪元素添加的,更改起来有点不好更改

改变:before,:after 伪类的样式,但css中并不能直接选择某一个元素的:before和:after伪类元素,

<div class="checkbox">
		<input type="checkbox" value="1" name="test"/>
		</div>	
.checkbox {
			    display: inline-block;
			    margin: 0 4px 0 0;
			    cursor: pointer;
			    text-align: left;
			    padding: 0px;
				width: 20p;
				height: 20px;
			}
			    input { display: none; }
			
			    .checkbox:before {
			        background: url(img/icon_07.png) no-repeat;
			        content: "";
			        float: left;
			        height: 18px;
			        width: 19px;
			        margin: 0;
			    }

基础样式,没有做任何操作与添加

当加上需要修改的样式与触发的jq代码时

		<meta charset="utf-8" />
.someclass {
			    display: inline-block;
			    margin: 0 4px 0 0;
			    cursor: pointer;
			    text-align: left;
			    padding: 0px;
				width: 20p;
				height: 20px;
			}
.someclass:before {
			     background: url(img/icon_08.png) no-repeat;
			     content: "";
			     float: left;
			     height: 18px;
			     width: 19px;
			     margin: 0;
			    }

JQ:$(".checkbox").click(function(){
			console.log(111)
			$(this).attr("class","someclass")
		})<br/>

当我点击时,就改变了这个标签的类名,也就改了样式

一点就成这样了




0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王永康
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部