Hover translation was borne from a cooperative effort between Dante and Lark. The need for this code stems from characters who speak in other languages, but players who do not. It's a fun and easy code to integrate into your HTML. Let's take a look!

"Я сошла с ума.""I'm losing my mind."

This code starts with a ready-made table or webpage ("Parent Element"). For the sake of this tutorial, I'll be using this simple div:

Now that we have our Parent Element all ready, we need to make an internal CSS code to create the "hover" effect. Here, I'll address each line of code so you understand what it means.

<style type="text/css">em {font-style:normal; color:red;}</style>

Inserting this bit of code before our parent element creates an internal style sheet which the page will reference. The em represents our hover element. Because of the normal use and style of an em element, we've set the font-style to normal, meaning the text will appear as standard text and not italic. This is also your opportunity to change the color of any <em> element you include in your parent element. Go ahead and insert an <em></em> around your spoken text. Our updated table.

Here's where things start to get tricky! Inside our <style type="text/css"> tag, we're going to insert another line.

em span.translated {display:none;}

This line references a <span> tag inside an <em> tag, and dictates that anything inside the <em><span class="translated"></span></em> will not be visible. Next, we insert the following:

em:hover span.translated {display:inline;}

This line references the same <em><span class="translated"> tag as the last, but this time it references em:hover. This means that when a user hovers their mouse over any <em> element, it will display what was initially hidden. Updated table. Here's our final line for our internal CSS:

em:hover span.original {display:none;}

This line indicates a specific <span> tag called "original," which would present itself as <span class="original">. This span is different than our previously-addressed <span class="translated"> and this tag tells it to hide when a mouse hovers over it. Now let's tie it together! Updated again.

Now that our parent element is all set up to understand different spans and ems, we can start to integrate those into our code. Since the text currently inside the parent is in my foreign language, that makes it <span class="original"> rather than translated. Go ahead and wrap that text with a span tag. (Now it looks kinda broken!)

Here's where we insert our translated text, inside a span of the same name. Be sure to insert this after the initial <span> and before the </em> tag!

<span class="translated">"I'm losing my mind."</span>

That's it! Now, when you look at your completed table, your text will change on a hover! You can even continue the sentence outside the </span>tag, or the paragraph outside of the </em> tag! Neat!

All my codes use the paragraph tag (<p>), and I have a tutorial for it on my main Tips page. Just be aware! If you're struggling with getting functionality out of this code, read the tutorial on the left side of the page.

Insert this into your webpage or before your HTML begins:

Use this for each translated phrase:

<p !-- Paragraph tag --!><em !-- Begin Hover Area --!><span class="original" !-- Default text --!>Default text.</span><span class="translated" !-- Translated text --!>Hover text.</span></em !--End hover area--!></p !-- End paragraph --!>