遇到一个问题，发现了一个很有用的却藏得很深的css属性：pointer-events
遇到的问题：我希望让一个div浮在上面，但是鼠标事件作用于被覆盖的图层。
解决方案：设置上面的div的css属性pointer-events为none
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .selectBox { display: inline-block; position: relative; } .selectTips { /* position: absolute; height: 100%; 85%; left: 1px; top: 0; text-align: left; line-height: 37px; background: white; border-bottom: 1px solid #e5e6e7; border-top: 1px solid #e5e6e7; pointer-events: none; padding-left: 15px; */ font-size: 14px; border-top: 1px solid rgb(229, 230, 231); border-left: 1px solid rgb(229, 230, 231); border-bottom: 1px solid rgb(229, 230, 231); 90%; height: 75%; margin-top: 3px; border-right-color: rgb(229, 230, 231); position: absolute; top: 0; background: white; pointer-events: none; } </style> <body> <div class="selectBox"> <select name="BillState" id="BillState" class="search form-control"> <option value="" selected disabled>请选择单据状态2</option> <option value="">所有单据</option> <option value="@((int)SaleOrderState.Invalid)" item-key="Invalid">草稿</option> <option value="@((int)SaleOrderState.ToDelive)" item-key="ToDelive">待出库</option> <option value="@((int)SaleOrderState.Deliving)" item-key="Deliving">部分出库</option> <option value="@((int)SaleOrderState.Delived)" item-key="Delived">已出库</option> <option value="@((int)SaleOrderState.ToSend)" item-key="ToSend">待发货</option> <option value="@((int)SaleOrderState.Send)" item-key="Send">已发货</option> <option value="@((int)SaleOrderState.ToRefund)" item-key="ToRefund">待退货</option> <option value="@((int)SaleOrderState.Refunding)" item-key="Refunding">@(BM.Util.EnumHelper.GetDescription(SaleOrderState.Refunding))</option> <option value="@((int)SaleOrderState.Refunded)" item-key="Refunded">已退货</option> <option value="@((int)SaleOrderState.Cancel)" item-key="Cancel">已取消</option> <option value="@((int)SaleOrderState.ToPay)" item-key="ToPay">待收款</option> </select> <div class="selectTips" id="BillStateText"> 请选择单据状态1 </div> </div> </body> </html> <script src="./jquery-2.0.3.min.js"></script> <script> $(document).ready(function(){ //选择事件 $("#BillState").on("change", function () { var option_name = $(this).find("option:selected").text(), item_name = option_name.replace(/(d+)s/, ""); $("#BillStateText").text(item_name); $(this).blur(); }); //状态事件 $("#BillState").on({ focus: function() { $("#BillStateText").css("border-color", "#1ab394"); }, blur: function () { $("#BillStateText").css("border-color", "#e5e6e7"); } }); }); </script>