Question

我先前问过一个不完整的问题...... 我用JSFiddle重新发布我的问题：

此示例适用于Mozilla，但不适用于IE或Chrome。

说明：我是一个代表静态标题的表。第二个包含行。 Eache行有2个表格单元格。第一个单元格可以是mouseHover，以显示其位置的弹出窗口。问题是，当我在Chrome和IE上滚动表格时，它在空间中没有正确显示弹出窗口，但在Mozilla中却是如此。

悬停时带有弹出窗口的单元格：

<div id="divCellule" runat="server" onmouseover="javascript:$(this).find("#infobulle").show();" onmouseout="javascript:$(this).find("#infobulle").hide();">
    <div class="infobulle" id="infobulle">
        <span>Title</title>
    </div>
    <span>063</span>
</div>

每个单元格都在一行表格中。该表位于div＆＃34;溢出＆＃34;

代码：

<div class="overflow">
  <table class="table_planning">
      <tr>
         <td>
             <-CELL->
         </td>
      </tr>
      <tr>
         <td>
             <-CELL->
         </td>
      </tr>
      <tr>
         <td>
             <-CELL->
         </td>
      </tr>
      <tr>
         <td>
             <-CELL->
         </td>
      </tr>
      <tr>
         <td>
             <-CELL->
         </td>
      </tr>
   </table>
</div>

CSS：

.overflow {
    display: block;
    width: 100%;
    height: 450px;
    max-height: 450px;
    overflow-x: auto;
    overflow-y: scroll;
}

表的CSS在小提琴中（太长）。

希望它能更好地解释......

Answer 1

Plz Add Top＆amp;左侧位置

.table_planning .infobulle{left:20px; top;50px}

Answer 2

The OP wrote in an edit：

我已经解决了这个问题！在包含弹出窗口的每个div上，我有两个事件：

onMouseHover='ShowInfoBulle(this);'
onMouseOut='HideInfoBulle(this);'

function ShowInfoBulle(sender) {
            var cell = $(sender);
            var infobulle = cell.find('#infobulle');
            var cellOffsetLeft = cell.offset().left;
            var cellOffsetTop = cell.offset().top;
            infobulle.css("top", cellOffsetTop + "px");
            infobulle.css("left", cellOffsetLeft + "px");
            infobulle.show();
        }

function HideInfoBulle(sender) {
            $(sender).find('#infobulle').hide();
        }

滚动显示表格中的弹出窗口

2 个答案: