如何在悬停时创建字体大小的更改而不重新调整其他文本？

Question

我想在css中使用悬停伪类来增加表中单个链接的大小，但是每次它们悬停时，大小增加都会影响行/列的大小以及表中的所有其他链接按照行动。

任何方式我只能使用css和html来防止这种情况？

Answer 1

您可以使用CSS3转换来缩放链接，而不会导致重新定位周围的元素，例如：

table a:hover{ -webkit-transform: scale(1.2); }

-webkit-可以针对其他供应商进行更改（例如-moz-和-ms-），但在某些浏览器中无法使用，包括IE8。

使用line-height不会阻止水平移动，因此会扩展列。

Answer 2

你可以这样做：

将初始height设置为line-height。

td {line-height: 20px; font-size: 14px;}
td:hover {font-size: 20px;}

小提琴：http://jsfiddle.net/mMZjf/

Answer 3

强制line-height高度相同，并在悬停时更改font-size。

Example here

Answer 4

您可以使用相对和绝对定位：

a:link {
    display: block;
    font-size: 1em;
    outline: thin solid;
}
a:hover {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3em;
}

请参阅this jsFiddle for an example。