Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: A:hover mystery

  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post

    A:hover mystery

    This page has a navigation menu who's item's text increases in size when the mouse hovers over them.

    I can find no CSS which produces this effect.

    Can you see what is making the hovered links appear larger?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello SRD75,
    It seems to just be moving on hover, not getting bigger.
    Remove this bit and see -
    Code:
    .main-navigation a:hover {
    	color: #000;
    	-moz-border-radius: 8px;
    	-webkit-border-radius: 8px;
    	border-radius: 8px;
    	border:#FFFFFF 2px solid;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    First of all, it's obvious that the text is moving because when you hover over the link a thick border surrounds it. If you add a border of the same width but with the color of the background (teal or blue), you'll be able to fix the moving problem.

    As far as the font size issue, it's almost always the case that your desired font style is overwritten somewhere. I tried to look through your 9 stylesheets but wasn't sure where your styles for that particular list was referenced.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Hey there,
    So the reason it looks like it is moving, is because on hover, you are adding a border
    Which is adding 2px on the top bottom left and right of the div, making it 4px taller, and 4px wider.

    An easy fix for this would be do add this

    Code:
    .main-navigation a { border:2px solid transparent; }
    This simply creates a border before the hover, but its colour is not visible.
    Now you won't have the jumping affect.

    You may want to alter your margins afterwards to move the div back up 2-4 px, but thats your choice.

    Hope this helps

    Cheers

  • Users who have thanked aaronhockey_09 for this post:

    SRD75 (02-05-2013)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thanks all. I learnt something again.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •