PDA

View Full Version : Simple HTML Font Increase Hover Code/CSS



username85
Feb 24th, 2012, 06:13 AM
Hello,

Quick question.

When I point to my link, in hover state obviously, with font-size attribute of 125% for example, how do I code it/what do I add so to that the neighboring links don't move. Right now, when I hover over the link and the size increases, the rest of the links move to accommodate the space difference. I know I can play around with it, I'm thinking maybe something to do with line height/padding/margin, but I thought I'd save some time from someone who has already done it.

The footer would be one example where I would like to use this 'feature'.

Thanks.

abduraooft
Feb 24th, 2012, 06:20 AM
Please post your code a link to your page. You'd need to set a fixed width to the wrapper elements of the links.

Mahdi Eftekhari
Feb 24th, 2012, 10:20 AM
Try negative margin.

But again post your code if it does not work so we can check it.

Regards
Mahdi Eftekhari

username85
Feb 24th, 2012, 12:02 PM
Here you go, the code is as follows:

<html>

<head>
<style type="text/css">
a.one:link {
color:#ffffff;
}
a.one:visited {
color:#ffffff;
}
a.one:hover {
font-size:125%;
}
</style>
</head>

<body>
<div id="footer" style="clear:both; height:97px; width:1012px; background:url(footerbg.jpg) no-repeat left top;
background-color:blue;">
<h4><center>
<a class="one" href="#">Home</a> &nbsp &nbsp &nbsp
<a class="one"href="#">Content</a> &nbsp &nbsp &nbsp
<a class="one" href="#">About</a> &nbsp &nbsp &nbsp
<a class="one" href="#">Contact</a> &nbsp &nbsp &nbsp

<br />

<h5>Copyright at 2012. All Rights Reserved.</h5>
</center></h4>

</body>
</html>