How to add hover or mouseover text (acronym not working)

  • Author
    Posts
  • #424519

    annoyedjew
    Member

    So I’m not running my own code, just using a template but would like to figure out how to do hover text on text — just looking for a couple of simple lines I can put in the html for my posts.

    In particular, I have a number of phrases in Yiddish — and I want the translation to appear when someone mouses over them. I’ve figured out how to do this using the acronym tag — but it makes the phrase show up in allcaps. Is there a way to lose the caps — or another tag to use instead of acronym?

    Thanks!

    The blog I need help with is whatsannoyingjews.wordpress.com.

    #424685

    devblog
    Member

    The use of the acronym tag, for what you want, is not semantically correct. Try this instead.

    <a title="translation" style="cursor: help;">Yiddish word</a>

    Honestly, this solution is not semantically correct either, but is the better one for what you want.

    If you want these anchor tags to be different from the rest, then just add a color property, like this:

    <a title="translation" style="color: #f00; cursor: help;">Yiddish word</a>

    The code I put in my example will give you red; you’d need to change that to whatever color you like, of course.

    #424689

    annoyedjew
    Member

    Thanks! That’s definitely better. One follow-up — is there a way to make it appear without the underline?

    #424826

    devblog
    Member

    Just add the text-decoration property:

    <a title="translation" style="color: #f00; cursor: help; text-decoration: none;">Yiddish word</a>

The topic ‘How to add hover or mouseover text (acronym not working)’ is closed to new replies.