WordPress.org

Ready to get started?Download WordPress

Forums

Hover in menu change image (4 posts)

  1. Karin
    Member
    Posted 2 years ago #

    Hi guys!

    I've been searching the web for hours now and can't get it the way I want with my menu.

    I've managed to add images instead of text in my menu. Now I would like to change the image to another one when I hover the menu item, and also keep that hovered image when I'm on that current page.

    This is the code I used to add the pictures.

    #menu-item-178 a {
    background: url(http://www.vendela-valentin.com/guiltyones/images/menu_full.png) no-repeat left top;
    background-position:0 0;
    height:35px; width:93px;
    text-indent:-9999px;
    }

    What can I change/add to add a picture to the hover and the current page as well?
    And how do I get rid of this black hover box which is there right now?

    My webpage:
    http://www.vendela-valentin.com/guiltyones

    I'm using a Twenty Ten child theme.

    Thanks!

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    web search for 'css sprites' and use a tool such as Firebug http://getfirebug.com/ to investigate which styles to edit.

    try to style for instance:

    #menu-item-178 a { background-position: 0 -35px; }
    #menu-item-178.current_page_item a { background-position: 0 -35px; }

    PS: as you are already working with sprites, it is just a question of finding the right css selectors and specificity.

  3. Karin
    Member
    Posted 2 years ago #

    Thanks! I managed to get the current_page_item to work now!

    My other problem is still there though... I can't get the black hover box to disappear. And I can't find out how to target the hover on separate menu items.. only for the entire menu...

    I tried to make the entire menu hover invisible but then the whole image becomes invisible when I hover...

    Any ideas?

  4. Karin
    Member
    Posted 2 years ago #

    Ahh I managed to fix it! I excluded the code in the twenty ten theme.

    /*
    #access li:hover > a,
    #access ul ul :hover > a {
    background: #333;
    color: #fff;
    }
    */

    And then everything went well :)

Topic Closed

This topic has been closed to new replies.

About this Topic