Html 如何在不重新对齐其他文本的情况下在悬停时更改字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14073498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i create a change in font size on hover without realigning other text?
提问by user1787489
I want to use the hover pseudoclass in css to increase the size of individual links in a table, however every time they are hovered over, the size increase affects the size of the rows/columns and all the other links in the table move in accordance.
我想在 css 中使用悬停伪类来增加表格中各个链接的大小，但是每次将它们悬停在上面时，大小的增加都会影响行/列的大小，并且表格中的所有其他链接都会按照.
Any way i can prevent this using only css and html?
有什么办法可以仅使用 css 和 html 来防止这种情况发生？
回答by Mooseman
You can use CSS3 tranform to scale the links without causing re-positioning of surrounding elements, for example:
您可以使用 CSS3 转换来缩放链接，而不会导致周围元素的重新定位，例如：
table a:hover{ -webkit-transform: scale(1.2); }
-webkit-can be changed for other vendors (e.g., -moz-and -ms-), but is not available in some browsers, including IE8.
-webkit-可以为其他供应商更改（例如-moz-和-ms-），但在某些浏览器中不可用，包括 IE8。
Using line-heightwill not prevent horizontal movement, therefore expanding the column.
使用line-height不会阻止水平移动，因此会扩展列。
回答by Praveen Kumar Purushothaman
You can do this way:
你可以这样做：
Set the initial heightto the line-height.
将初始height设置为line-height.
td {line-height: 20px; font-size: 14px;}
td:hover {font-size: 20px;}
Fiddle: http://jsfiddle.net/mMZjf/
小提琴：http: //jsfiddle.net/mMZjf/
回答by Alex Wayne
Force the line-heightheight to be the same and change the font-sizeon hover.
强制line-height高度相同并更改font-size悬停。
回答by Gumbo
You could use relative and absolute positioning:
您可以使用相对和绝对定位：
a:link {
display: block;
font-size: 1em;
outline: thin solid;
}
a:hover {
position: absolute;
top: 0;
left: 0;
font-size: 3em;
}
See this jsFiddle for an example.
有关示例，请参阅此 jsFiddle。
