前端小技巧（二）：评分效果css版

来源：互联网发布：数据库模型图pk 编辑：程序博客网时间：2024/06/02 06:46

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box{            width:205px;            height:42px;            position: relative;        }        label{            width:42px;            float: right;            height: 42px;            margin-left: -1px;        }        label span{            width:40px;            height: 40px;            border:1px solid #0b4b5a;            display: inline-block;            position: relative;            z-index: 2;        }        label:hover dfn{            display: block;            z-index:1;        }        label input{            display: none;        }        label input:checked~dfn{            display: block;        }        label dfn{            width:100px;            height: 42px;            line-height:42px;            text-align: center;            position: absolute;            background: #f00283;            display: none;            top:0;            right: -110px;            font-style: normal;        }        label em{            height:40px;            position: absolute;            left:0;            top:1px;        }        label:hover em{            z-index: 1;        }        .item5:hover em,.item5 input:checked~em{            width: 40px;            background: #f00;        }        .item4:hover em,.item4 input:checked~em{            width: 81px;            background:#ffa800;        }        .item3:hover em,.item3 input:checked~em{            width: 122px;            background: #e1e400;        }        .item2:hover em,.item2 input:checked~em{            width: 163px;            background: #ace400;        }        .item1:hover em,.item1 input:checked~em{            width: 204px;            background: #00e400;        }    </style></head><body><div class="box">    <label class="item1">        <input type="radio" name="grid">        <span></span>        <dfn>非常好</dfn>        <em></em>    </label>    <label class="item2">        <input type="radio" name="grid">        <span></span>        <dfn>很好</dfn>        <em></em>    </label>    <label class="item3">        <input type="radio" name="grid">        <span></span>        <dfn>一般</dfn>        <em></em>    </label>    <label class="item4">        <input type="radio" name="grid">        <span></span>        <dfn>较差</dfn>        <em></em>    </label>    <label class="item5">        <input type="radio" name="grid">        <span></span>        <dfn>很差</dfn>        <em></em>    </label></div></body></html>

这里写图片描述

这是JS入门的一个小效果，相信大家也都见过，不必多说。
其实用到的技巧也不多，主要就是“+”、“~”这两个比较骚的选择器再配合单选按钮的checked伪类

阅读全文

0 0