javascript - 将 div 悬停在数据表标题单元格上

Question

我目前有一个过滤 div:

<div class="filterOptions" id="FilterStatus">
<input type="checkbox" id="Status1" data-status="1"><label for="Status1">1</label>
<input type="checkbox" id="Status2" data-status="2"><label for="Status2">2</label>
<input type="checkbox" id="Status3" data-status="3"><label for="Status3">3</label>
<input type="checkbox" id="Status4" data-status="4"><label for="Status4">4</label>
</div>

它用它自己的 javascript 完美地完成了这项工作。但是，当标题悬停时，我想将其放置在“状态”列标题的正下方。将代码放在表本身中似乎会删除代码，那么我应该在其他地方添加它吗？

这个jsfiddle显示正在发生的事情。在此，它显示了 div，尽管它将它移出了表 div。理想情况下，我希望它仅在悬停在特定表格标题上时显示，但我被难住了。

Answer 1

类似于 this :

var table = $('#myTable').DataTable({
    autoWidth: false,
    initComplete: function(settings, json) {
        let api = new $.fn.dataTable.Api(settings);
        let header = api.column(0).header();
        let originalText = $(header).text();
        let newText = originalText + `<div class="filterOptions" id="FilterStatus">
                <input type="checkbox" id="Status1" data-status="1">
                <label for="Status1">1</label>
                <input type="checkbox" id="Status2" data-status="2">
                <label for="Status2">2</label>
                <input type="checkbox" id="Status3" data-status="3">
                <label for="Status3">3</label>
                <input type="checkbox" id="Status4" data-status="4">
                <label for="Status4">4</label>
            </div>`;
        $(header).html(newText).attr("id", "hover")
    }
});

使用这个CSS:

#FilterStatus {
    display: none;
}

#hover:hover #FilterStatus {
    display: block;
}

不过，您需要更改复选框的操作!