邊框移動整個表

Question

我對小提琴測試此：

<table> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
</table> 

這個CSS：

.changeme:hover { 
    border:outset; 
    cursor:pointer; 
} 

我只是想製造一點飛出般的效果在td標籤上，但是當你在列上下運行鼠標時，它有這種奇怪的波浪效果，我怎麼能刪除它？

Answer 1

Demo Fiddle

嘗試這樣做：

.changeme{ 
    padding:2px; 
} 
.changeme:hover { 
    border:2px outset; 
    padding:0; 
    cursor:pointer; 
} 

因爲被懸停添加邊框的寬度，抵消了其他表格單元格的「流行」正在發生的事情。要消除這種情況，請在單元格上設置與您希望應用的邊框寬度相同的填充，然後在懸停時移除。邊界將無縫地填充這個空間，保持表格結構。

Answer 2

您還可以使用outline代替border財產，這將在此特定情形

.changeme:hover { 
    outline:2px solid #f00; 
    padding:2px; 
    cursor:pointer; 
} 

Demo

適合更好的使用爲何原因border該偏移？如果您知道CSS Box Model，則border會計入元素的外部而不是內部，因此它會在懸停時抖動元素。

有不同的方法來解決這個問題，還可以使用transparent邊框顏色保留邊框空間像

Demo

.changeme{ 
    padding:2px; 
    border: 2px solid transparent; 
} 
.changeme:hover { 
    border:2px solid #f00; 
    padding:2px; 
    cursor:pointer; 
}