Goinggreen different active vs hover

Community Forums Forums Design Tips and Tricks Goinggreen different active vs hover

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Charlie 1 year, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23820

    pru
    Participant
    Post count: 1

    I’m trying to change the link hover in the navigation to be different from the active link CSS, but in the style.css they are all crammed into one directive like so:
    .menu-primary li a:active,
    .menu-primary li a:hover,
    .menu-primary li:hover a,
    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    .menu-secondary li:hover a,
    .menu-secondary .current_page_item a,
    .menu-secondary .current-cat a,
    .menu-secondary .current-menu-item a,
    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu li:hover a,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    color: #352014;}
    I tried copying this section into a new one and then cut out everything but the hover styles, but it doesn’t work even with !important on it. Any ideas how to separately style the hover vs active in the nav? Thanks!

    #24025

    Charlie
    Participant
    Post count: 112

    A better method might be to remove the hover selectors from the above chunk of CSS and re-declare their values. So:

    .menu-primary li a:active,
    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    .menu-secondary li:hover a,
    .menu-secondary .current_page_item a,
    .menu-secondary .current-cat a,
    .menu-secondary .current-menu-item a,
    #header .menu li a:active,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    color: #a6d045;
    }

    .menu-primary li a:hover,
    .menu-primary li:hover a,
    #header .menu li a:hover,
    #header .menu li:hover a {
    color:#7D26CD;
    }

    Will make the hover links on the primary nav bar purple, while leaving the active links green.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.