我想在 css 中使用悬停伪类来增加表中各个链接的大小,但是每次将它们悬停时,大小的增加都会影响行/列的大小,并且表中的所有其他链接都会按照移动.
有什么办法可以只使用css和html来防止这种情况发生吗?
您可以使用 CSS3 转换来缩放链接,而不会导致周围元素的重新定位,例如:
table a:hover{ -webkit-transform: scale(1.2); }
-webkit-
可以为其他供应商(例如-moz-
和-ms-
)更改,但在某些浏览器中不可用,包括 IE8。
使用line-height
不会阻止水平移动,因此会扩展列。
将初始设置height
为line-height
.
td {line-height: 20px; font-size: 14px;}
td:hover {font-size: 20px;}
强制line-height
高度相同并更改font-size
悬停。
您可以使用相对和绝对定位:
a:link {
display: block;
font-size: 1em;
outline: thin solid;
}
a:hover {
position: absolute;
top: 0;
left: 0;
font-size: 3em;
}
有关示例,请参阅此 jsFiddle 。