9

我想在 css 中使用悬停伪类来增加表中各个链接的大小,但是每次将它们悬停时,大小的增加都会影响行/列的大小,并且表中的所有其他链接都会按照移动.

有什么办法可以只使用css和html来防止这种情况发生吗?

4

4 回答 4

22

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

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

-webkit-可以为其他供应商(例如-moz--ms-)更改,但在某些浏览器中不可用,包括 IE8。

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

于 2012-12-28T17:47:33.490 回答
6

你可以这样做:

将初始设置heightline-height.

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

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

于 2012-12-28T17:44:29.790 回答
2

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

这里的例子

于 2012-12-28T17:44:30.957 回答
-2

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

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

有关示例,请参阅此 jsFiddle 。

于 2012-12-28T18:00:54.670 回答