jquery - 数据表,jquery,动画,z-index
问题描述
我在我的页面上使用 html 表,它内置在 dataTables 和固定列中。我向使用 animate 构建的行添加了提示,并尝试在 animate 中使用 z-index,但是当我的提示触及修复列时,它们会重叠。
这个jquery“工具提示”
$('span.jQtooltip').each(function() {
var el = $(this);
var title = el.attr('title');
if (title && title != '') {
el.attr('title', '').append('<div>' + title + '</div>');
var width = el.find('div').width();
var height = el.find('div').height();
el.hover(
function() {
el.find('div')
.clearQueue()
.delay(200)
.css('z-index', 999)
.animate(
{width: width + 20, height: height + 20}, 200, function () {
$(this).css('z-index', 9999)
}
).show(200)
.animate({width: width, height: height}, 200);
},
function() {
el.find('div')
.css('z-index', 999)
.animate({width: width + 20, height: height + 20}, 150)
.animate({width: 'hide', height: 'hide'}, 150);
}
).mouseleave(function() {
if (el.children().is(':hidden')) el.find('div').clearQueue();
});
}
})
CSS 样式
.jQtooltip {
position: relative;
cursor: help;
border-bottom: 1px dotted;
}
.jQtooltip div {
display: none;
position: absolute;
bottom: -1px;
left: -1px;
z-index: 99999;
width: 190px;
padding: 8px 12px;
text-align: left;
font-size: 12px;
line-height: 16px;
color: #000;
box-shadow: 0 1px 3px #C4C4C4;
border: 1px solid #DBB779;
background: #FFF6BD;
border-radius: 2px;
height: auto !important;
width: auto !important
}
解决方案
推荐阅读
- python - Pandas - 绘制两个数据框,一个作为标记
- r - 您可以在 rmarkdown 或 bookdown 中将 natbib 的引用样式更改为数字吗?
- java - Android Studio:应用程序未保存到数据库/从数据库读取
- angularjs - 使用 AngularJS 动态加载 Google Maps API
- google-sheets - 表格:数组结果未展开
- javascript - concat1D 中的错误:张量 [23] 的等级必须与其余的等级相同
- c# - 获取 TKey 和 TValue
- php - 使用外键获取数据时的问题
- python - Python:如何从列表中获取第 n 个元素,其中 n 来自列表
- javascript - 返回布尔值的更好方法