Return to Support

About a:active

Home Forums Graphene WordPress theme Support About a:active

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9629
    KingSwiff
    Member

    Hi there.

    I want the top menu to be like it is, but with a small twist. If the menu item is active, I want another action, than if not active, when a:hover. But it seems like a:active don’t work in the css. Is that true, or do I mis something?

    #44190
    Anonymous
    Member

    Your active menu is light blue and when you hover any menu (active and inactive) it shows a dark blue hover color. So what else do you want for the menu? I don’t quite understand.

    You want a separate hover color for the active menu and one for the inactive menus?

    #44191
    KingSwiff
    Member

    Yes exactly.

    I want to imitate the buttons in the menu, so when hover a non active page I want the light blue color, and when hover the active page I want the darker blue and the lighter blue when not hover. If possible 🙂

    #44192
    Quote:
    If the menu item is active, I want another action, than if not active, when a:hover. But it seems like a:active don’t work in the css.

    I think you are confusing a:hover and a:active, which are pseudoclasses built into CSS, with a.current, which is a CSS class that you can define.

    :hover and :active are dependent upon mouse actions. :hover comes into play when you hover your pointer over something with that pseudoclass; :active comes into play in the time between when you click on an item and when you release the mouse button.

    .current is a user-defined CSS class that is usually applied to the page link on the page you are actually on. In the case of Graphene, the actual css class for the top menu is .current-menu-item.

    Hope this helps.

    #44193
    KingSwiff
    Member

    You are right, now I know, I didn’t understand a:active – thanks for the good explanation!

    And it works perfect with .current-menu-item thanks again.

    If somebody could use this one day, the final code looks like:

    #header-menu > li.current-menu-item a:hover {
    background-color: #4476dd !important;
    height: 13px;
    }

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

You must be logged in to reply to this topic.