Support » Themes and Templates » Hover in menu change image

  • Karin


    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( no-repeat left top;
    background-position:0 0;
    height:35px; width:93px;

    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:

    I’m using a Twenty Ten child theme.


Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael


    Forum Moderator

    web search for ‘css sprites’ and use a tool such as Firebug 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.



    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?



    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 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Hover in menu change image’ is closed to new replies.