css樣式設置sku規格組，屬性值選中，懸浮效果，樣式兼容Firefox，Chrome效果更佳

最新推荐文章于 2020-10-20 18:32:15 发布

王焜棟琦

最新推荐文章于 2020-10-20 18:32:15 发布

阅读量174

点赞数

分类专栏： Html5 css 文章标签： sku屬性屬性值選中禁用效果

本文链接：https://blog.csdn.net/u011511086/article/details/84031308

版权

css 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Html5

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>sku規格組，屬性值選中，懸浮效果</title>
    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
        a{list-style:none;text-decoration:none;}
        .contairDiv{display:inline-block;padding:1px;position:relative;top:10px;}
        .PopVal_title{display:inline-block;min-width:74px;}
        .PopVal { display: inline-block; margin-right: 10px; }
        .PopVal a { border: 1px solid #bababa; padding: 6px 10px; white-space: nowrap;float: left;width: auto !important;}
        .PopVal a:hover { border: 2px solid #1C86EE;margin: -1px; }
        .selected a { border: 2px solid #1C86EE; margin: -1px;}
        .not_Allow_Selected a { cursor: not-allowed; border: 1px dashed #f1f1f1; }
        .not_Allow_Selected a:hover { cursor: not-allowed; border: 1px dashed #f1f1f1; margin: unset; }
    </style>
</head>
<body>
    <div style="padding:50px;">
        <div id="PopValGoup" style="margin-top:20px;margin-bottom:20px;">
            <div>
                <div>
                    <div class="PopVal_title">
                        <label>尺寸</label>
                    </div>
                    <div class="contairDiv">
                        <div class="PopVal selected"><a href="#" prpsysno="449696112668839936" provalsysno="449696351987437568">5.7英吋</a></div>
                        <div class="PopVal"><a href="#" prpsysno="449696112668839936" provalsysno="449696252183973888">5英吋</a></div>
                        <div class="PopVal"><a href="#" prpsysno="449696112668839936" provalsysno="449696301374771200">5.5英吋</a></div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div  class="PopVal_title">
                        <label>颜色</label>
                    </div>
                    <div class="contairDiv">
                        <div class="PopVal not_Allow_Selected"><a href="#" prpsysno="448892367974436864" provalsysno="448893567260168192">黑色</a></div>
                        <div class="PopVal not_Allow_Selected"><a href="#" prpsysno="448892367974436864" provalsysno="448892953956454400">白色</a></div>
                        <div class="PopVal"><a href="#" prpsysno="448892367974436864" provalsysno="448893019714752512">蓝色</a></div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div  class="PopVal_title">
                        <label>具体故障</label>
                    </div>
                    <div class="contairDiv">
                        <div class="PopVal"><a href="#" prpsysno="449004320583585792" provalsysno="449011049593573376">外屏碎</a></div>
                        <div class="PopVal not_Allow_Selected"><a href="#" prpsysno="449004320583585792" provalsysno="449011185258336256">内屏碎</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>