There is a checkbox that will select a table containing product information. When this item is selected, a CSS style overlays the table with a 30% color tint to indicate it has been chosen.
By using only CSS and jQuery, I can apply a style with a higher z-index than the image being used for the visual overlay. The overlay style correctly displays the z-index, but does not appear over the image.
Even after setting the z-index of the image to a -10 value in jQuery, it still remains on top of the colored div. I attempted to force the div to a z-index of 105 within the same jQuery code, but it does not display over the lower-z-indexed image.
I suspect that the issue lies in the fact that the div with the higher z-index is repositioning everything inside it, causing the nested image to also move up in z-index level.
In this case, what would be the best approach to overlay a series of dynamically generated tables with a 30% opacity style?
UPDATED WORKING CODE:
$(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>
UPDATED WORKING CODE:
<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>
The provided code successfully sets the expected values as seen through browser Inspect Element, but the desired results are not achieved.