在子元素后面制作父 div

Question

我在一个项目中使用jQuery.Gantt ，我需要在这个插件中做很多自定义。
其中之一是将鼠标移到元素（蓝色单元格）上并显示工具提示（在示例中我放置了一个标题）。
我有一些“突出显示”周末的 div，这些 div 超过了甘特图元素（蓝色单元格）
如果我更改单元格的 z-index，它们将在水平滚动中覆盖标题（月和日）。 我试图找到一种方法来获得以下顺序：周末 div 与z-index 0 ，甘特单元格（蓝色）与z-index 1和标题与z-index 2 。 我需要这个命令来在甘特单元格上显示标题并在周末单元格上使用鼠标悬停事件。
我怎样才能通过下面的例子实现这一点？

 .dataPanel { outline: 1px solid #DDD; background-position-y: 15px; background-size: 30px 48px; background-image: linear-gradient(to left, rgba(153, 152, 153, 0.7) 1px, transparent 1px), linear-gradient(0deg, #E7ECEF 0%, #E7ECEF 53%, #ECF1F4 53%, #ECF1F4 100%); background-repeat: repeat; position: relative; font-family: 'Verdana, sans-serif'; } .header { position: sticky; top: 0; z-index: 600; width: 241px; background: #fff; height: 63px; } .row { float: left; height: 24px; line-height: 24px; margin: 0; } .dayPosition { top: 46px; } .monthPosition { top: 15px; } .day { background-color: #fff; width: 24px; line-height: 24px; text-align: center; border-bottom: 1px solid #DDD; border-right: 1px solid #DDD; font-size: 10px; color: #007E7A; } .row .sa, .row .sn, .row .wd { height: 24px; text-align: center; width: 29px; } .bar { background-color: #D0E4FD; height: 18px; margin: 0 3px 3px 0; position: absolute; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset; border-radius: 3px; }

 <div class="dataPanel" style="width: 27540px; height: 732px;"> <div class="header"> <div class="row header monthPosition"> JAN </div> <div class="row header dayPosition"> <div class="row day wd" id="dw-1559098800000" data-repdate="1559098800000"> <div class="fn-label">WED</div> </div> <div class="row day wd" id="dw-1559185200000" data-repdate="1559185200000"> <div class="fn-label">THU</div> </div> <div class="row day wd" id="dw-1559271600000" data-repdate="1559271600000"> <div class="fn-label">FRI</div> </div> <div class="row day sa" id="dw-1559358000000" data-repdate="1559358000000"> <div class="fn-label">SAT</div> <div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div> </div> <div class="row day sn" id="dw-1559444400000" data-repdate="1559444400000"> <div class="fn-label">SUN</div> <div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div> </div> <div class="row day wd" id="dw-1559530800000" data-repdate="1559530800000"> <div class="fn-label">MON</div> </div> <div class="row day wd" id="dw-1559617200000" data-repdate="1559617200000"> <div class="fn-label">TUE</div> </div> <div class="row day wd" id="dw-1559703600000" data-repdate="1559703600000"> <div class="fn-label">WED</div> </div> </div> </div> <div title="Saturday" class="bar" style="top: 63px; left: 90px; width: 29px;"><div class="fn-label">24</div></div> <div title="Sunday" class="bar" style="top: 63px; left: 120px; width: 29px;"><div class="fn-label">24</div></div> <div title="Monday" class="bar" style="top: 63px; left: 150px; width: 29px;"><div class="fn-label">24</div></div> <div title="Tuesday" class="bar" style="top: 63px; left: 180px; width: 29px;"><div class="fn-label">24</div></div> </div>

^{JSFiddle 中的代码}

Answer 1

你只需要添加pointer-events: none; 到覆盖div。