WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Added code to change hover colour but it doesn't work, any ideas?? (8 posts)

  1. SRCreative
    Member
    Posted 2 years ago #

    Hi,
    I'm trying to change the colour of my nav bar so that when a user hovers it changes to pink. I've added the following to my style sheet but nothing happens:

    #top div.main-nav {
    a:hover
    color: #ff3399 !imporant;
    }

    Site is http://www.susierichards.com

    I've read loads on how to do it,inc. the above, but it's not working!
    Thanks for your help,
    Susie

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

  3. SRCreative
    Member
    Posted 2 years ago #

    Thanks for the link alchymyth. I've corrected my code to that of the tutorial and added it to my style.css but it still doesn't work. What am I doing wrong?

    #top div.main-nav {
    background: none;
    display: block;
    float: right;
    font-size: 18px;
    font-weight: bold;
    margin: 18px 0 0;
    padding: 4px 0;
    text-align: left;
    a:hover {color:#FF3399;}
    }

  4. SRCreative
    Member
    Posted 2 years ago #

    any idea??? sorry but I can't work out what i'm doing wrong...

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    one step back to the basics:
    http://www.w3schools.com/css/

    untested, and only corrected for syntax:

    #top div.main-nav a: hover {
    background: none;
    display: block;
    float: right;
    font-size: 18px;
    font-weight: bold;
    margin: 18px 0 0;
    padding: 4px 0;
    text-align: left;
    }
  6. SRCreative
    Member
    Posted 2 years ago #

    Your back to basics lessons helped me heaps on my 'work' page for sorting out margins/border/font colour. Thanks very much!

    BUT, the a:hover still doesn't work. I've copied and pasted your code above into my style.css and added the font colour so it now reads:

    #top div.main-nav a: hover {
    background: none;
    display: block;
    float: right;
    font-size: 18px;
    font-weight: bold;
    margin: 18px 0 0;
    padding: 4px 0;
    text-align: left;
    color: #FF3399;
    }

    I've also tried it with just:

    #top div.main-nav a: hover {
    color: #FF3399;
    }

    and I've cleared my cache. I'm at a loss to know what else to try. I know this is absolutely basic coding, but I cannot see why it's not working for me! Please help!!

  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    my mistake - there shouldn't have been a space between a: and hover;

    try:

    #top div.main-nav a:hover {
    background: none;
    display: block;
    float: right;
    font-weight: bold;
    text-align: left;
    color: #FF3399;
    }

    also removed the margin, padding and font-size.

  8. SRCreative
    Member
    Posted 2 years ago #

    It works, thank you very much! I appreciate your patience!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.