css樣式設定sku規格組，屬性值選中，懸浮效果，樣式相容Firefox，Chrome效果更佳
阿新 • • 發佈：2018-12-21
<!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>