悬停表格时显示带有信息的 div 不起作用

Question

我有一个绘制表格的 tal 模板，但是在悬停时显示单元格标题的功能不起作用。

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div>
        <div class="container" tal:repeat="machine_result item.items()">
          <button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/>
        <div class="collapse container" id="${machine_result[0]}_div">
          <table class="table table-hover table-sm table-responsive table-bordered">
            <tr tal:repeat="tuple machine_result[1].get('return')">
              <th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
              <td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
            </tr>
          </table>
         </div>
        </div>
    </div>


     <script>
    $(document).ready(function(){
      $("#multi_host_filter").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("table tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });



    $("td").on({
       mouseenter: function(e){
            var $cell = $(this);
            var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html();
            var paragraph = '<p>' + headerVal + '</p>';
            $('#floating_div').html(paragraph);
            $('#floating-div').stop(true);
            $('#floating_div').css({left: e.pageX, top: e.pageY});
            $('#floating_div').width(150);
            $('#floating_div').css('z-index', 4000);
            $('#floating_div').height(40);
        },
        mouseleave: function(e){
            $('#floating_div').css('z-index', -4000);
            $('#floating-div').css('display', 'none');
        },
    });
    
    
    </script>

我已经尝试过 $('table').hover(function(){//something} , function(){//something when leave}) 但是当我离开表格时 div 没有隐藏

"#floating-div" 已经在 index.html 创建，我可以从这个脚本修改它 有什么想法吗？

Answer 1

查看您的代码时，在大多数情况下，它似乎正是您想要完成的——该表的格式有点不稳定（打开和关闭 TH 和 TD <th>...</th> 和 @987654322 @ - 但我也不熟悉 tal 模板）。

但是将您的代码减少到最低限度并重用大量代码，我生成了以下解决方案。

唯一真正的编辑是我在#floating_div 上添加了mouseleave() 事件，立即填充光标下方的 div 会导致光标混淆。它以为它位于<td> 顶部的地方，现在突然位于#floating_div 顶部。所以，“离开”<td> 是行不通的。这是因为光标现在位于其他对象之上，并且会离开该对象。

$("td").on({
   mouseenter: function(e){
        //console.log( 'in',  this );
        let output = $(this).closest("table").find("tr > th").eq($(this).index()).html();
        $('#floating_div').html( output );
        $('#floating_div').removeClass('hidden');
        $('#floating_div').css({left: e.pageX, top: e.pageY});
    },
    mouseleave: function(e){
        //console.log( 'out', this );
        $('#floating_div').addClass('hidden');
    },
});

$('#floating_div').mouseleave( function(){
  $(this).addClass('hidden');
});

*{ margin: 0; padding: 0; font-family: Arial, sans-serif; }
table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); }
#floating_div{
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  display: block;
  background-color: rebeccapurple;
  color: white;
  pointer-events: none;
}
  #floating_div.hidden{
    display: none;
    top: -1000px;
    left: -1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
  </tr>
</table>

<div id="floating_div" class="hidden"></div>