实现原理:利用checked 选择器和兄弟选择器,通过复选框的复选与取消复选,达到收藏红心的显示与隐藏效果
默认复选框选中时的状态
复选框被取消复选的状态
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2226582_dki77h4juap.css">
<style>
/* 设置一个居中的盒子 */
.box {
margin: 40px auto;
width: 200px;
height: 200px;
}
/* 设置一个盒子放收藏按钮 */
.font {
float: right;
margin-right: 20px;
width: 86px;
height: 62px;
font-size: 40px;
text-align: center;
}
/* 设置一个放字体图标及复选框的盒子 */
.heart-box {
position: relative;
width: 86px;
height: 62px;
}
/* 设置字体图标大小 */
i,
.iconfont {
font-size: 60px;
color: red;
}
/* 定位复选框位置,和其他两个心重叠,并设置透明度为0,提高层级 */
input {
position: absolute;
left: -17px;
top: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
z-index: 2;
}
/* 选中复选框的兄弟元素,当复选框状态为复选时,使它隐藏 */
input:checked+.icon {
display: none;
}
/* 定位字体图标 使它和复选框与另一个字体图标重叠 */
.icon {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<!-- 设置一个居中的盒子 -->
<div class="box">
<!-- 设置一个放收藏两字的盒子 -->
<div class="font">收藏</div>
<!-- 设置一个放字体图标及复选框的盒子 -->
<div class="heart-box">
<!-- 设置一个复选框,默认状态被复选 -->
<input type="checkbox" checked>
<!-- 字体图标实心 -->
<i class="iconfont icon-shoucangshixin1 icon"></i>
<!-- 字体图标空心-->
<i class="iconfont icon-shoucang1"></i>
</div>
</div>
</body>
</html>