将鼠标悬停在 table 上时显示 div 和信息不起作用

Showing div with info while hovering a table does not work

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

这是我的代码:

<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(){//离开时的东西}) 但是当我离开时 div 没有隐藏 table

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

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

但是将您的代码减少到最少并重用其中的大部分代码,我生成了以下解决方案。

唯一真正的编辑是我在 #floating_div 上添加了一个 mouseleave() 事件,在光标正下方填充 div 会导致光标混淆。它认为它位于 <td> 之上的地方现在突然位于 #floating_div 之上。因此,"leaving" <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>