Increasing font size for links on hover changes background color size, how to stop this?


Tags: html,css,hyperlink,resize,hover

Problem :

I'm new to html & css so bear with me. I feel it's something simple that I'm missing but I can't out what.

For example, I have a navigation bar like this:

<nav id="navbar">
    <a class="nav" href="#home">Home</a> &#124;
    <a class="nav" href="#link1">Link 1</a> &#124;
</nav>

With css:

#navbar {
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 18pt;
    text-align: center;
    background-color: rgba(0,0,0,0.75);
    color: white;
    margin:15px;
    padding: 15px;
}

I've set the links font to increase in size and change color when I hover over them:

a.nav:hover {
    color: red;
    font-size: larger;
}

Which works fine, but when i hover over the links the background of my nav bar increases downwards a bit as if to fit my new text size. How can I stop the background from changing size?



Solution :

Set line-height:18pt for your hover, it will stop the anchor increasing it's original height:

a.nav:hover {
  color: red;
  font-size: larger;
  line-height:18pt;
}

Example fiddle


    CSS Howto..

    How to make horizontal lines sit beside circle bullets using CSS

    How to split a div into multiple rows and columns in css?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How to give effect on dragging in css or through jquery

    How can I wrap a page with a centered DIV?

    How to put the div at the center with css?

    How to design the web page for minimum format loss when pasting into MS Word

    How to add a third level to my CSS drop down menu

    how to bypass style in element that is automatically applied through class?

    How to decrease the width of this div so that another div can come next to it?

    How to do onclick in CSS to do transition on image?

    How to add vertical scrolling to Windows 8 app in snapped view

    How to use Open Sans font with cakePhp 3?

    How to make background image position stay same on all resolutions?

    How to make

    How to detect if content have more then one line in Angular?

    How to separate image folder and css folder to work with eachother in maven project

    How to remove white border from blur background image

    How to copy this semi-static menu?

    How to refer to css file in codeigniter? 2.0

    How can I manage the dimansions of #homeSub in CSS so it won't diappear when I move my mouse from homeBox to homeSub?

    How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

    How to make a parent --> node relationship in css?

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to fill the width under an image with a caption without defining the width of the caption?

    How to vertically align inline-block elements with height set and test with browser tools

    How to compare two css files and copy just the differences?

    How to create a sliding navigation with either jquery or css? [closed]

    How can I set the main theme-font dynamically, in WordPress

    How to set a background-color to element which has the same id with anchor of url?