html - 如何将 DIV 标记定位为悬停(z-index)在表格单元格上

Question

这听起来应该很容易，但由于某些原因，它并没有像我预期的那样工作。我的 HTML 大致如下所示:

<TD align="center">
<DIV style="position: relative; z-index: 2; top: 0; left: 0; width: 100%; height: 100%">
</DIV>
<SELECT DISABLED>
<OPTION>Option 1
<OPTION>Option 2
</SELECT>
</TD>

基本上我希望 DIV 标签悬停在单元格上(z-index，而不是垂直于顶部)，然后弄乱 DIV 的不透明度和颜色，这样看起来整个单元格都被禁用了(而不是仅仅SELECT 标签)。

背后的故事是我想禁用 SELECT 标记，然后提供一个工具提示来向用户解释它被禁用的原因。问题是，一旦我禁用了 SELECT 标记，它也会禁用鼠标悬停事件，因此我无法显示工具提示。

在这方面的任何帮助都会很棒!

Answer 1

我相信沿着这些思路的东西会起作用:

<TD align="center" style="position: relative; z-index: 1;">
<DIV style="position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%">
</DIV>
<SELECT DISABLED>
<OPTION>Option 1
<OPTION>Option 2
</SELECT>
</TD>

除非父元素也被定位，否则 div 上的定位将无法正常工作