Mouseover translations

• 

  southseaconversations · Member · Aug 20, 2012 at 4:49 pm

  • Copy link
  • Add topic to favorites

  I refer to the following closed thread on how to add a translation that will appear above a section of text when someone hovers their mouse over it: https://en.forums.wordpress.com/topic/how-to-add-hover-or-mouseover-text-acronym-not-working?replies=4

  This <a title="....mouseover content..."> is exactly what i was looking for, but i am experiencing a nasty glitch: i cannot get rid of the bold & underline that comes automatically for text between the </a><a> </a> tags.

  On the above-mentioned page it says this can be done by specifying “text-decoration: none;” in the <a>.

  Although I can successfully control the colour of the text this way, e.g. </a><a> the text-decoration part is being ignored.

  Thanks for any help.

  The blog I need help with is: (visible only to logged in users)

• 

  pcrumm · Member · Aug 21, 2012 at 8:39 pm

  • Copy link

  Hey there,

  You should be able to do something like this to prevent the underline from taking place:

  This <a href="#" title="....mouseover content...">is a text-decoration test.</a>

  Note the addition of “!important” to the CSS rule; this will make sure that this rule takes precedence over any other specified rules.

  Please let me know if I can be of any further help.

  Best,
  P.

• 

  designsimply · Member · Aug 30, 2012 at 3:08 pm

  • Copy link

  All of the examples in this help request seem to have gotten a little mixed up when they were posted in the forum. I’m not sure how that happened!

  @southseaconversations, you should be able to use text-decoration:none and font-weight:normal properties to remove link underlining and the bold font weight.

  If you need further help, please reply back here pointing to a specific example and mark this thread as ‘not resolved’ in the forums.