CODEWITHSUNDEEP
htmlcss
user1787489
user1787489

Reputation: 1007

How do i create a change in font size on hover without realigning other text?

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.

Any way i can prevent this using only css and html?

Upvotes: 16

Views: 77788

Answers (4)

Gumbo
Gumbo

Reputation: 655219

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.

Upvotes: -3

Mooseman
Mooseman

Reputation: 18891

You can use CSS3 tranform to scale the links without causing re-positioning of surrounding elements, for example:

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.

Using line-height will not prevent horizontal movement, therefore expanding the column.

Upvotes: 30

Alex Wayne
Alex Wayne

Reputation: 187024

Force the line-height height to be the same and change the font-size on hover.

Example here

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You can do this way:

Set the initial height to the line-height.

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

Fiddle: http://jsfiddle.net/mMZjf/

Upvotes: 9

Related Questions