鼠标悬停使表格单元坚果

我有一个三个单元格的宽度分别为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

编辑：

jQuery的

$('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; 
}

来源

2013-05-10 Alex

听起来像是我的错字。你可以发布代码吗？ – jchapa 2013-05-10 21:47:26

是的，我已更新原代码 – Alex 2013-05-10 21:55:00

你可以把它放在演示（jsfiddle.net）？这样我可以看到到底发生了什么。 – Ian 2013-05-10 23:01:48

这是因为该表是不是一个固定的宽度，所以当你更改单元格内容为“<”的TD（和表）变小。即，你的td是宽度随其内容而变化的表格宽度的30％。因此，它可能以100px宽的表格的30％开始，然后更改为40px宽的表格的30％（例如，这些不是真正的px值），这会随着宽度的变化来回敲击您的内容。将表格或td设置为固定宽度，你会很好。您也可以在td中放置一个固定宽度的div，以便单元格可以展开或收缩，但不让内容反弹。

来源

2013-05-10 23:23:29 bbird

我同意bbird发生的事情。作为解决办法，我建议在表中添加以下CSS属性：

table-layout: fixed;

来源

2013-05-11 07:04:24 alx

鼠标悬停使表格单元坚果

回答

相关问题