利用checked实现收藏按钮红心的显示与隐藏

最新推荐文章于 2023-02-26 09:59:45 发布

澜痕

最新推荐文章于 2023-02-26 09:59:45 发布

阅读量545

点赞数

分类专栏：小技巧文章标签：前端 css

本文链接：https://blog.csdn.net/qq_34723035/article/details/110836793

版权

小技巧专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现原理：利用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>

澜痕

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
利用checked实现收藏按钮红心的显示与隐藏

实现原理：利用checked 选择器和兄弟选择器，通过复选框的复选与取消复选，达到收藏红心的显示与隐藏效果默认复选框选中时的状态复选框被取消复选的状态实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
复制链接

扫一扫