3

我在 jquery 中有一个范围滑块，工具提示在句柄上方，我的问题是工具提示的 z-index 位置...

我想设置它们，使我沿着滑块拖动的滑块高于未拖动的滑块。

目前，第一个工具提示在最后一个工具提示之后，我不知道如何将其设置为以上述方式工作......

您可以在 jsfiddle 中查看我的情况：http: //jsfiddle.net/dzorz/H4sGB/

脚本：

$(function() {
    $( ".slider-assets" ).slider({
        range: true,
        min: 100,
        max: 500,
        values: [ 200, 300 ],
        slide: function( event, ui ) {
            $( ".amount-assets" ).val( ui.values[ 0 ] + "k € - " + ui.values[ 1 ] + "k €");

            $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0]  + "k €" + '</div></div>');
            $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1]  + "k €" + '</div></div>');

        }
        });
        $( ".amount-assets" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k € - " + $( ".slider-assets" ).slider( "values", 1 ) + "k €" );

        $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 0)  + "k €" + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 1)  + "k €" + '</div></div>');
});

html:

<br/>
<br/>
<div class="slider-assets"></div>
<br/>
<input type="text" class="amount-assets" />

CSS：

.amount-assets1,.amount-assets2{
    width: 48px;
}

.tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

我不确定这是 css 还是 jquery 问题，我试图增加 z-index 但它不起作用。

欢迎任何建议或帮助，您可以自由编辑我的 jsfiddle..

谢谢

4

4 回答 4

2

您的问题与 z-index 堆叠上下文有关。您需要将 z-index 应用于 ui-slider-handle 本身。以下作品：

.ui-slider-handle.ui-state-active {
    z-index: 3;
    position: absolute;
}

您可以在此处阅读有关堆叠上下文的更多信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

于 2013-09-19T10:54:17.500 回答
2

试试这个：

.ui-tooltip, .arrow:after {
  position: absolute;
  z-index:9999;
}
于 2015-07-21T09:41:58.637 回答
0

尝试在幻灯片处理程序的末尾添加此代码

$(".slider-assets .ui-slider-handle").css('z-index', '0');
$(ui.handle).css('z-index', '100');
于 2013-09-19T10:58:17.773 回答
0

您可以在 slidestart 上增加 z-index 并在 slidestop 上重置 z-index

$(".slider-assets").on("slidestart", function(event,ui){
    $(ui.handle).css("z-index","1082");
});

$(".slider-assets").on( "slidestop", function(event, ui){
    $(ui.handle).css("z-index","1080");
});

提琴手

于 2013-09-19T11:01:27.213 回答