9

css でホバー擬似クラスを使用して、テーブル内の個々のリンクのサイズを大きくしたいのですが、それらがホバーされるたびに、サイズの増加は行/列のサイズに影響し、テーブル内の他のすべてのリンクはそれに応じて移動します.

cssとhtmlのみを使用してこれを防ぐ方法はありますか?

4

4 に答える 4

22

CSS3 Transform を使用して、周囲の要素を再配置せずにリンクをスケーリングできます。次に例を示します。

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

-webkit-他のベンダー (-moz-および など-ms-) では変更できますが、IE8 などの一部のブラウザーでは使用できません。

を使用line-heightすると、水平方向の移動が妨げられないため、列が拡張されます。

于 2012-12-28T17:47:33.490 に答える
6

次の方法で実行できます。

にイニシャルheightをセットしline-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 に答える