css - 使用 :before pseudo element (z-index issue) 突出显示列表条目

Question

我有一个元素列表(由 JSTree 生成)。我想通过 :before 伪元素突出显示元素的整行，该元素已经在不同的 HTML 结构中为我工作。现在，对于生成的 z 索引，有些东西搞砸了。具有 :before 类的元素的 z-index 目前为 -1。如果我将它更改为 1，它将出现在所有链接的前面，但它应该是背景。无论我选择什么值，我都无法让突出显示出现在背景前面，而是出现在链接后面。

部分html代码如下:

<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">&nbsp;</ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Root</a>

                <ul style="">
                    <li class="jstree-open"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Category1</a>

                        <ul style="">
                            <li class="jstree-leaf"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Item 1</a>

                            </li>
                            [...]
                        </ul>
                    </li>
                    <li class="jstree-last jstree-closed"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Category 2</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS 是这样组成的:

 /*
 * jsTree default theme 1.0
 * Supported features: dots/no-dots, icons/no-icons, focused, loading
 * Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
 */
 .jstree-custom {
    background: #383838;
}
.jstree-custom a {
    color: #c3c3c3;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
}
.jstree-custom a.jstree-hovered {
    color: #ffffff;
    background: transparent;
    border-color: transparent;
}
.jstree-custom a.jstree-clicked {
    color: #ffffff;
    background: transparent;
    border-color: transparent;
}
.jstree-custom li:hover a.jstree-hovered:before {
    position:absolute;
    left: 0;
    content:"";
    width: 100%;
    height: 30px;
    background: #614832;
    z-index:-1;
}
.jstree-custom a.jstree-clicked:before {
    position:absolute;
    left: 0;
    content:"";
    width: 100%;
    height: 30px;
    background: #614832;
    z-index: -1;
}
.jstree-custom {
    padding-left: 20px;
    padding-top: 15px;
}
.jstree-custom ul:first-child {
    margin-top: 0px;
}
.jstree-custom li, .jstree-custom ins {
    /*background-image:url("../img/lib/jquery-plugins/jstree/d.png");*/
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 12px
}
.jstree-custom li {
    background-position:-90px 0;
    background-repeat:repeat-y;
}
.jstree-custom li.jstree-last {
    background:transparent;
}
.jstree-custom .jstree-ocl {
    width: 7px;
    height: 30px;
    margin-right: 13px;
}
.jstree-custom .jstree-open > .jstree-ocl {
    background-image:url(../img/lib/jquery-plugins/jstree/tree_opened.gif);
}
.jstree-custom .jstree-closed > .jstree-ocl {
    background-image:url(../img/lib/jquery-plugins/jstree/tree_closed.gif);
}
.jstree-custom .jstree-leaf > .jstree-ocl {
    background-position:-36px 0;
}
.jstree-custom .jstree-loading > .jstree-ocl {
    background:url("throbber.gif") center center no-repeat !important;
}
.jstree-custom .jstree-hovered {
    background:#e7f4f9;
    border:1px solid #d8f0fa;
    padding:0 2px 0 1px;
}
.jstree-custom .jstree-clicked {
    background:#beebff;
    border:1px solid #99defd;
    padding:0 2px 0 1px;
}
.jstree-custom a .jstree-themeicon {
    background-position:-56px -19px;
}
.jstree-custom .jstree-no-dots li, .jstree-custom .jstree-no-dots .jstree-leaf > .jstree-ocl {
    background:transparent;
}
.jstree-custom .jstree-no-dots .jstree-open > .jstree-ocl {
}
.jstree-custom .jstree-no-dots .jstree-closed > .jstree-ocl {
}
.jstree-custom .jstree-no-icons a .jstree-themeicon {
    display:none;
}
.jstree-custom .jstree-search {
    font-style:italic;
    color:aqua;
}
.jstree-custom .jstree-no-checkboxes .jstree-checkbox {
    display:none !important;
}
.jstree-custom .jstree-check {
    display:none;
}
.jstree-custom .jstree-checkbox {
    background-position:-2px -19px;
}
.jstree-custom .jstree-checked {
    background-position:-38px -19px;
}
.jstree-custom .jstree-undetermined {
    background-position:-20px -19px;
}
.jstree-custom a:hover .jstree-checkbox {
    background-position:-2px -37px;
}
.jstree-custom a:hover .jstree-checked {
    background-position:-38px -37px;
}
.jstree-custom a:hover .jstree-undetermined {
    background-position:-20px -37px;
}
#jstree-dnd.jstree-custom ins {
    background:transparent;
}
#jstree-dnd.jstree-custom .jstree-ok {
    background:url("d.png") -2px -53px no-repeat;
}
#jstree-dnd.jstree-custom .jstree-er {
    background:url("d.png") -18px -53px no-repeat;
}
/*#jstree-marker.jstree-custom { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }*/
 .jstree-custom .jstree-locked a {
    color:silver;
    cursor:default;
}
.jstree .jstree-icon.jstree-themeicon {
    display: none;
}

还有一个 JSFiddle，所有这些都放在一起，可以重现问题:

http://jsfiddle.net/nt7eC/1/

请参阅元素 2，它具有 jstree-clicked 类，并且应该以突出显示的背景显示。

Answer 1

更新:整行修改

需要添加两行代码:

.jstree-custom {
    position: relative; /* add this */
    z-index: 1; /* add this */
}

Here's the fiddle example.