使用Z-index選中復選框時創建顏色疊加

Question

我有一個復選框，將用於選擇帶有產品信息的表格。 一旦選擇了css樣式，便會覆蓋30％的顏色，這樣就很明顯選擇了該項目。

僅使用css和jquery，我就可以調用具有比用於可視地查看疊加層的圖像更大的z-index的樣式。 疊加樣式有效並顯示正確的z索引，但它不在圖像上。

使用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>

上面的代碼在設置期望值方面做得很好，可以通過執行瀏覽器Inspect Element來看到這些期望值，但是結果並沒有達到目標。

Answer 1

沒錯，由於正在處理表格，因此Z索引更改不會級聯。 為了解決這個問題，請直接在需要的div上更改z-index。

嘗試將CS​​S更改為此：

.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>

Answer 2

解決方案是確保沒有任何元素以比動態更新后的值更高的z值包裝您的選擇。

例如：

  <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>

我們看到一個div在z索引深度為100時包裝了圖像，而jquery設置的css為50。刪除div與100 z索引值可以使jQuery更新的css在50正確覆蓋。