[英]Best way to swap images from a stack : src, visibility, z-index… something else?
[英]Tooltips z-index position or something else?
我在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 ..
謝謝
您的問題在於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
試試這個:
.ui-tooltip, .arrow:after {
position: absolute;
z-index:9999;
}
嘗試在幻燈片處理程序的末尾添加此代碼
$(".slider-assets .ui-slider-handle").css('z-index', '0');
$(ui.handle).css('z-index', '100');
您可以在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");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.