Work Header

How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)

Work Text:

Hover effect is disabled, booo. :( [ Click this if hover effect is disabled ]


First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:

#workskin a.hovertext1:after {
  content: 'Text before hover.';

#workskin a.hovertext1:hover:after,
#workskin a.hovertext1:focus:after {
  content: 'Text after hover.';
  display: inline;
  background-color: #FFF;
  color: #2a2a2a;
  border-bottom: 1px solid #FFF;
  position: relative;
  margin: 0px;
  padding: 0px;

#workskin .hide {
  display: none;

Hit "Submit" (or "Update" if adding to a previous work skin), and now to implement it in your work.

Go to your the work where you want to use the skin , and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and the basic code is the following:

<a name="return1" id="return1"></a><a href="#return1" class="hovertext1"></a>

Which gives us the following:

Now you might've noticed that the text isn't actually in your Work Text but in your Work Skin. This means that 1) if you want more than one lines of text to hover over, you need to add each individual line to the Work Skin in a separate section (naming them hovertext2, hovertext3, etc.), but also 2) no text will be visible if creator's style is turned off. We can cover that by using the class in the skin labeledhide. So we would put the following:

  <a name="return1" id="return1"></a><a href="#return1" class="hovertext1"><span class="hide">Text with Creator's Style turned off</span></a>

Which would look like this:
Text with Creator's Style turned off [ Click here to turn Creator's Style back on ]

We can go one step forward and use this with my Linked Footnotes tutorial and make a linked footnote only when creator's style is off:

<a name="return1" id="return1"></a><a href="#return1" class="hovertext1"><span class="hide">Text with Creator's Style turned off</span></a><span class="hide"><sup>[ <a href="#note1">Click this if hover effect is disabled</a> ]</sup></span>

Then, at the bottom of the work or in our footnotes, put the following code:

<p class="hide"><a name="note1" id="note1"></a> This section is if the hover effect is disabled. <sup>[<a href="#return1" title="return to text">return</a>]</sup></p>

Again, make sure if you use this for multiple lines, you change the numbering system for each line (note2/return2, note3/return3, note4/return4, etc.).

You can use this skin for various different ways, like for spoilers:
No Spoilers when creator's style is off!

Or for translations:
"Tengo el gato mis pantalones," He said, and then blushed. "Wait, I don't think that's right."

Even for quick author's notes:
It's times like this where she turned to the comfort of The Bee Movie script. [ I started to write the Bee Movie script but decided against it. You're welcome. ]


- Even if you decide not to do the anchor links or bottom footnotes, you still need to have <a name="return1" id="return1"> in front of the link you want changed. The reason is because on mobile, you don't really have the hover capabilities, so I've made it that when you click on the text, it SHOULD show the new text. (I've only tried it once in Safari on my iphone, so if anyone else can let me know if it works for them, that'd be awesome.

- I made the background of the transformed text white and the text itself black so it would look like actual text versus link text, if that makes sense. You could always remove that from the skin if you don't want it.

- Speaking of link text, this does make your text pre-transformation into links; it was the only way to get the hover effect to work. So you might want to make a note to your readers that the links are supposed to be there (and won't really do anything when style is off/your work is downloaded)

- Also, if you want to have text with an apostrophe, you have to change how you write the content section. For example, if you used a contraction (Never should've come here.) you would have use double quotes in your content section ("Never should've come here.";). If you are putting a quote ("Not all that wonder are lost.") you would use the single apostrophe around the quote (content:'"Not all that wonder are lost."';) However, if you have a quote and a contraction ("Never should've come here," he said, cracking his knuckles.) then you could use backslash to get around the problem (content: '"Never should\'ve come here," he said, cracking his knuckles.)

- EDIT (7/23/17): Thanks to magicalmagic, I've now realized that certain characters will not be accepted by this method (I don't know if it's limits of the pseudo element or the work skin module). The best way to get around them is to use the CSS (ISO) code. What I mean is if you had the sentence, ¿cómo que no lo sabes?, in the workskin you would have to put the following:

content: '\00bfc\00f3mo que no lo sabes?';

To find out how to replace the character you need, please refer to this list here and look in the section labeled, "CSS (ISO)"

This section is if the hover effect is disabled. [return]