jquery - 鼠标悬停使表格单元格发疯

Question

我有一个表格，其中包含三个单元格，其宽度分别为 30%、40% 和 30%。表格本身的宽度为其容器的 25%，范围从 1024 像素到 400 像素不等。

第一个单元格是一个显示 GALLERY 的按钮。在悬停(td)时，其文本变为“<”(通过 jquery)。

问题是，当表格被压缩时(即:容器小于 600px)，我将鼠标悬停在 GALLERY 按钮上时，单元格的宽度发生变化(因为它的 html 现在只是一个“< ”)。这会导致鼠标悬停区域被推开，并且单元格会在悬停状态之间快速来回切换。

单元格的宽度已定义，没有填充或边距，并且 overflow:hidden 已打开。

有人知道如何解决这个问题吗？我也遇到了与第三个单元格相同的问题。

这只发生在 firefox 中。

截图:

• 正常:http://i.imgur.com/5pZivit.png
• 悬停:http://i.imgur.com/O8wEMuh.png

编辑:

j查询

$('td.back').hover(
    function() {
        $(this).empty().html('<').addClass("hover");
    },
    function() {
        $(this).empty().html('GALLERY').removeClass("hover");
    });

html

<table id="toolbar" style="display:none;">
      <tr>
        <td class="back" onclick="<?php 
          if ($gallery_id == "2") echo "goToGallery(1);";
          else echo "goToIndex();";
          ?>">GALLERY
      </td>

CSS

#toolbar td {
font-family:'helvetica',sans-serif;
font-size:11px;
color:white;
text-align:center;
cursor:pointer;
overflow:hidden;
-webkit-font-smoothing:antialiased;
}

#toolbar td.back {
width:30%;
}

#toolbar td.back:hover {
color:#e61b23;
}

Answer 1

这是因为表格不是固定宽度，所以当您将单元格内容更改为“<”时，td(和表格)会变小。即，您的 td 是宽度随内容变化的表格宽度的 30%。因此，它可能从 100px 宽表格的 30% 开始，然后更改为 40px 宽表格的 30%(例如，那些不是真正的 px 值)，这会随着宽度的变化来回敲击您的内容。将表格或 td 设置为固定宽度，一切都会好起来的。 您还可以在 td 中放置一个固定宽度的 div，这样单元格就可以展开或收缩，但又可以防止内容跳来跳去。