Hover in menu change image

  • Karin

    (@vendelavalentin)


    12 years, 6 months 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(https://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:
    https://www.vendela-valentin.com/guiltyones

    I’m using a Twenty Ten child theme.

    Thanks!

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

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

    Thread Starter Karin

    (@vendelavalentin)

    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?

    Thread Starter Karin

    (@vendelavalentin)

    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.