三个圆形按键点击颜色发生改变

最新推荐文章于 2021-02-25 03:32:41 发布

虎与狼

最新推荐文章于 2021-02-25 03:32:41 发布

阅读量608

点赞数

文章标签： web基础颜色的切换

本文链接：https://blog.csdn.net/u013452990/article/details/54315558

版权

需要设置3个类来实现点击颜色的切换

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>
	<style>
		label#lbl-1 {
		  background: #6756ea;
		  width: 20px;
		  height: 20px;
		  display: block;
		  float: right;
		  border-radius: 50%;
		  margin: 16px 10px 0px 0px;
		}
		label#lbl-2 {
		  background: #ea569a; 
		  width: 20px;
		  height: 20px;
		  display: block;
		  float: right;
		  border-radius: 50%;
		   margin: 16px 10px 0px 0px;
		}
		label#lbl-3 {
		  background: #f1c85f;
		  width: 20px;
		  height: 20px;
		  display: block;
		  float: right;
		  border-radius: 50%;
		  margin: 16px 10px 0px 0px;
		}		
	</style>
	<body>		
		<div class="head-info">		
			<label id="lbl-1" οnclick="this.id='lbl-2'" οnmοuseοut="this.id='lbl-1'"> </label> 
			<label id="lbl-2" οnclick="bb()"> </label>
			<label id="lbl-3" οnclick="cc()" > </label>
		</div>
	</body>
	
</html>

虎与狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三个圆形按键点击颜色发生改变

需要设置3个类来实现点击颜色的切换 label#lbl-1 { background: #6756ea; width: 20px; height: 20px; display: block; float: right; border-radius: 50%; margin: 16px 10px 0px 0px;
复制链接

扫一扫