jquery - 动态生成的 HTML/CSS 网页，将鼠标悬停在表格中时会调整其大小

Question

我有一个表格单元格 (X)，其中包含一些表格/div。我正在尝试向它添加一个功能，当我将鼠标悬停在它上面时，它会在单元格的一侧添加一个箭头。问题是当我将鼠标悬停在它上面然后添加我需要的箭头时它正在调整单元格的大小。对于箭头，我使用 jQuery 创建一个“div”，其中包含一个表，其中包含用于覆盖笔划和箭头图标的行。我正在使用 jQuery 将该 div 附加到我的原始单元格。我正在使用 jQuery 设置一个属性，当我将鼠标悬停在原始单元格上时，该 div 应该显示。我使用 jQuery 方法 .show() 来实现这一点。这是在 css 中添加一个“display:block”并导致单元格垂直增加大小。我试过“position:absolute”但它不起作用，因为包含单元格(X)的原始表格可以有很多行，每行都会有一个单元格(X)并且所有单元格都需要在末尾有类似的箭头当盘旋过来。

我使用的 jQuery 代码是:

    this.hover = $(document.createElement('div'));
    this.hover.prop("id", "hover");
    this.hover.addClass("person-row-hover");
    var html = '<div class="person-row-hover-stroke"></div>';
    html += '<table class="person-row-hover-table">';
    html += '<tr>';
    html += '<td class="person-row-hover-table">';
    html += '<div class="arrow-right-grey"></div>';
    html += '</td>';
    html += '</tr>';
    html += '</table>';
    this.hover.append(html);
    this.stroke = $(this.hover.children()[0]);
    this.stroke.hide();
    this.arrow = $(this.hover.children()[1].rows[0].cells[0]).children();
    var arrow = this.arrow;
    cell.append(this.hover);
    this.hover.hide();
    var hover = this;


    row.mouseover(function() {
        hover.displayArrow();
    });
            /**
   * Displays the hover arrow.
   * @param none
   */   
   this.displayArrow = function() {
       this.hover.show();
   }

此代码使用的 CSS 是:

.person-row-hover {vertical-align:middle; text-align:center; position:relative;
   right:-300px; top:-55px; width:27px; height:20px; cursor:pointer;}
.person-row-hover-overlay {background-color:#BCBDC0;}
.person-row-hover-overlay-clicked{background-color:#CFD1D7;}
.person-row-hover-stroke {position:absolute; left:2px; width:1px; height:100%; border-  
 left:1px solid white;}
.person-row-hover-table {position:absolute; vertical-align:middle; border:0px;  
 height:100%; width:100%; z-index:5;}

单元格的 HTML 是: http://pastebin.com/VwE4x25s

图像的外观:

我对其进行了颜色编码，我附加的“div”是黑色的。其中有一个带有箭头/笔划的表格。红色是单元格 (X)。 正如您所见，它变得比黑色部分更大，最初它与黑色 DIV 的高度相等，但当我将鼠标悬停在它上方时，它变大了这个网页是通过我公司的应用运行的，只能通过IE8运行。所以我无法使用任何 Chrome 东西。如果您需要我将更多代码放在那里，我会尽力而为，因为由于我公司的政策，我不能把所有东西都放在那里。谢谢，任何帮助都会很棒。

Answer 1

我能够修复它，我不断改变绝对和相对的组合，而不是顶部/右侧，我使用 margin-top/margin - left 并且它起作用了。比你屏幕笨!