鼠標懸停使表格單元堅果

我有一個三個單元格的寬度分別爲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

鼠標懸停使表格單元堅果

回答

相關問題