3

アイテムのリストがあります（JSTreeによって生成されます）。別の HTML 構造で既に機能していた :before 疑似要素を使用して、アイテムの行全体を強調表示したいと思います。さて、生成されたものでは、z-index がめちゃくちゃになっています。: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 クラスがあり、強調表示された背景で表示されるはずです。

4

1 に答える 1

4

更新: 行全体に変更

次の 2 行のコードを追加する必要があります。

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

これがフィドルの例です。

于 2013-05-28T14:42:22.643 に答える