Question

我有一个动态添加内容的数据表和一个用于显示悬停数据的块元素，一切正常，除了我在CSS中做的任何事情我都无法改变块的位置。唯一可行的选项是abosulte，但它只会将块粘贴到表格的底部，当我选择其他任何位置方式块时没有显示，我尝试手动改变顶部/左侧属性，没有改变阻止位置。如果我没有正确描述问题，我可以包括html / js / css或根据需要制作小提琴。谢谢！

编辑：添加代码段：

数据表的html：

<table class="table table-striped datatable-sort compact">
                <thead>
                    <tr>
                        <th scope="col">Time</th>               <!--Created-->
                        <th scope="col">Lane</th>               <!--LaneNumber-->
                        <th scope="col">Credence(%)</th>        <!--Credence-->
                        <th scope="col">LPN</th>                <!--Plate-->
                        <th scope="col">LPN(%)</th>             <!--PlateConfidence-->
                        <th scope="col">Country</th>            <!--CountryCode-->
                        <th scope="col">Country(%)</th>         <!--CountryConfidence-->
                        <th scope="col">Speed(km/h)</th>        <!--Speed-->
                        <th scope="col">Speed change(km/h)</th> <!--SpeedDifference-->
                        <th scope="col">Width(cm)</th>          <!--Width-->
                        <th scope="col">Height(cm)</th>         <!--Height-->
                        <th scope="col">Length(cm)</th>         <!--Length-->
                        <th scope="col">Weight(kg)</th>         <!--Weight-->
                        <th scope="col">Axles</th>              <!--Axles-->
                        <th scope="col">VehicleID</th>          <!--ID-->
                        <th scope="col">ClassEUR13</th>         <!--Classification-->
                        <th scope="col">Version</th>            <!--null-->
                        <th scope="col">Title</th>              <!--null-->
                        <th scope="col">Direction</th>          <!--Direction-->
                        <th scope="col">Certainty</th>          <!--null-->
                        <th scope="col">Axles Count</th>        <!--AxleCount-->
                        <th scope="col">Gross Weight</th>       <!--null-->
                        <th scope="col">Axles 1 weight(kg)</th> <!--Axles[0].Weight-->
                        <th scope="col">Axles 2 weight(kg)</th> <!--Axles[1].Weight-->
                        <th scope="col">Heading (sec)</th>      <!--Height-->
                        <th scope="col">Gap (sec)</th>          <!--Gap-->
                        <th scope="col">Digital Signature</th>  <!--null-->
                        <th scope="col">Checksum</th>           <!--Checksum-->
                    </tr>
                </thead>
            </table>

悬停元素的css：

.table-hover {
display: none;
bottom: 31px;
left: 57px;
z-index: 20;
position: absolute;
width: 550px;
height: 180px;
background-color: white;
box-shadow: 1px 5px 20px 0px #9498a4;

}

JS：

$('.datatable-sort').on('mouseenter', 'tr', function () {
    console.log('hovered in');
    var id;
    var data = $('.datatable-sort').DataTable().row(this).data();
    $('.datatable-sort th').each(function () {
        if ($(this).text() == "VehicleID") {
            id = data[$(this).index()];
        }
    });
    this.parentElement.parentElement.appendChild(CreateHoverElement());
    document.getElementById('tablehover').style.display = 'block';
    document.getElementById('tablehover').style.webkitAnimation = 'slide-down .3s ease-out';
    document.getElementById('hoverID').innerHTML = '' + id;
    $.connection.ldServiceHub.server.clientHoverRequestImage(id);       
});

$('.datatable-sort').on('mouseleave', 'tr', function () {
    console.log('hovered out');
    document.getElementById('tablehover').remove();
});

注意：在tbody或tr / td下添加元素并不会有所作为。

DataTable，元素位置在悬停时不变

0 个答案: