javascript - 使用 z-index 选中复选框时创建颜色叠加

Question

我有一个复选框，用于选择包含产品信息的表格。一旦选择了一个 css 样式，就会覆盖 30% 的颜色，这样就很明显该元素被选中了。

仅使用 css 和 jquery，我可以调用具有比用于直观地查看叠加层的图像更大的 z-index 的样式。叠加样式有效并显示正确的 z-index，但它不在图像上。

我使用 Jquery 将图像的 z-index 强制恢复为 -10 值。仍然显示在彩色 div 之上……我什至可以强制同一个 Jquery 中的 div 移动到 z-index 105，但它仍然没有显示在较小 z-index 上的图像顶部。

我认为问题在于接收更大 z-index 的 div 将其中的所有内容作为起点向上移动，因此嵌套图像也在 z-index 级别上移。

如果是这样，如何最好地覆盖一系列需要用 30% 不透明度样式覆盖的动态生成的表格？

更新的工作代码:

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

更新的工作代码:

<div>
  <table  cellpadding="6" cellspacing="0" border="0" width="100%">
    <thead>
      <tr>
        <td> Item 1 </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="http://sgdesign.com/temp/temp1.png" alt="" style="z-index:-1; position:relative;"></td>
      </tr>
    </tbody>
  </table>
  <input type="checkbox" name="checkbox" id="checkbox">
  Select </div>


<br>
<br>


<div>
  <table  cellpadding="6" cellspacing="0" border="0" width="100%">
    <thead>
      <tr>
        <td > Item 2 </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td valign="top" style="border-left:0px none;padding-left:12px;"><img src="http://sgdesign.com/temp/temp2.png" alt="" style="z-index:-1; position:relative;"></td>
      </tr>
    </tbody>
  </table>

    <input type="checkbox" name="checkbox2" id="checkbox2">
  Select </div>

上面的代码在设置浏览器检查元素时可以看到的预期值方面做得很好，但结果并没有达到目标。

Answer 1

您是对的，Z-index 更改不会级联，因为您正在处理一个表。为了解决这个问题，直接在需要的 div 上更改 z-index。

尝试将您的 CSS 更改为:

.jobSelected {
    background-color: hsla(0,0%,0%,0.30);
    position: relative;
}

.jobSelected div.overlay {
    z-index: 50;
}

当然，您的 HTML 也应该更新:

    <tr>
    <td valign="top" style="border-left:0px none;padding-left:12px;">
        <div style="z-index:100; position:relative;" class="overlay">
            <img src="http://sgdesign.com/temp/temp1.png" alt="" style="z-index:-1; position:relative;">
        </div>
    </td>
    </tr>