I am experiencing an issue with highlighting items in a list generated by JSTree using the :before pseudo element. The z-indexes seem to be causing some trouble, as adjusting them results in the highlighting appearing either behind all links or in front of everything. No matter what value I set for the z-index, I can't get the highlighting to display as intended.
Below is a snippet of the HTML code:
<div id="jlayout_west_center" class="center" style="width: 300px; height: 897px; left: 0px; top: 0px; position: absolute;">
<div id="jlayout_west_center_content" class="jlayout-panelContent jstree jstree-0 jstree-custom jstree-focused" style="width: 100%; height: 100%;">
<ul class="jstree-no-dots jstree-no-icons">
<li class="jstree-last jstree-open"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon"> </ins>Root</a>
<ul style="">
<li class="jstree-open"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon"> </ins>Category1</a>
<ul style="">
<li class="jstree-leaf"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon"> </ins>Item 1</a>
</li>
[...]
</ul>
</li>
<li class="jstree-last jstree-closed"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon"> </ins>Category 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
This is the CSS styling for the elements:
/* CSS styles for jsTree default theme 1.0 */
.jstree-custom {
background: #383838;
}
.jstree-custom a {
color: #c3c3c3;
font-size: 14px;
line-height: 30px;
height: 30px;
}
(jstree-custom styling continues...)
A JSFiddle demo showcasing the issue and providing a platform for reproducing it can be found here:
One specific item called Item 2 is marked with the jstree-clicked class but fails to display the desired highlighted background. Any assistance in resolving this problem would be greatly appreciated.