how to add hover text to secondary menu

  • chinochaos

    #2568

    Hi,

    I have a second menu on my website (www.footballargentina.com) which has images instead of text, showing the logos of the various clubs, and when the user clicks on it, it obviously goes to the that club page. I have been trying, in vain, to add hover text, so that a little box appears when the mouse passes over the image, saying the name of the club. I think it is a simple piece i need to add to the CSS, which i have tried, in many combinations, but it never appears. What is the CSS that I would need to add, and where do i add it?

    For example, in my CSS file (for the parent, i now have a child theme…), i added the equivalent of this for each image:

    #menu-item-386 {
    text-indent: -9999px;
    width: 40px;
    }

    #menu-item-386 a {
    background: #21AEC1 url(http://www.footballargentina.com/wp-content/uploads/2011/08/velez.bmp) top center no-repeat !important;
    }

    #menu-item-386 a:hover {
    background: #21AEC1 url(http://www.footballargentina.com/wp-content/uploads/2011/08/velez.bmp) top center no-repeat !important;

    this set the menu items as they are. where would i need to add the extra information amongst that for the hover text?

    Thank you for any help!

    Josh

    #20933

    Hmmm… very good question.

    How do you add a title attribute to an image being referenced by CSS???

    I’m going to have to look into this one and post back. Meanwhile… anyone else?

    chinochaos

    #20934

    it doesn’t have to be done through CSS, it’s just that is the way I’ve learnt everything so far! If there is a better to way to be doing either of the two things, i would gladly change my course! cheers for looking into it josh, but beware, ive been looking into it for days haha…

    Mod

    Kenneth John Odle

    #20935

    The hover text is actually called a “title” attribute, and you need to add it to the html code. If you are using a custom menu, you would add this information to the “Title Attribute” box.

    Don’t forget: code between backticks, please.

    That is definitely the most memorable menu I have seen in some time. But it doesn’t look like a menu. You might want to add a bit of text to let people know they can click on a logo to go to that team’s info.

    chinochaos

    #20936

    Thanks Kenneth! That’s exactly what i was looking for. I can’t believe i didn’t notice that i had the option on the page setup in the dashboard. i spent so long trying to write the code that i didn’t even think to look there. Thank you

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

You must be logged in to reply to this topic.