jquery 鼠标悬浮进行星级选择

代码语言:html

所属分类:星级评分

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>CodePen - 5* HOVER</title>
    <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
    <style>
        .stars {
            width: 420px;
            height: 80px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }

        .stars .star {
            width: 84px;
            position: absolute;
            top: 0;
            font-size: 70px;
            color: #FFFD5A;
            text-shadow: 1px 2px 4px #C3C11C;
            padding: 0 5px;
        }

        .stars-ghost {
            width: 0px;
            position: relative;
            float: left;
            overflow: hidden;
            height: 100%;
            z-index: 2;
        }

        .stars .star:nth-child(1) {
            left: 0;
        }

        .stars .star:nth-child(2) {
            left: 84px;
        }

        .stars .star:nth-child(3) {
            left: 168px;
        }

        .stars .star:nth-child(4) {
            left: 252px;
        }

        .stars .star:nth-child(5) {
            left: 336px;
        }

        body {
            background: #fff;
        }

        .info {
            width: 100%;
            font-size: 30px;
            text-align: center;
            font-family: "Consolas";
            position: absolute;
            top: -80px;
        }

        body,
        html {
            overflow: hidden;
        }

        *,
        *:after,
        *::before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            text-decorat.........完整代码请登录后点击上方下载按钮下载查看

网友评论0