This example code shows you how you can use CSS to create <a href='javascript:void(0)' class='internalLink hidden' onclick='state.display("Link Found")'>hidden links</a> in a Twine story. (Please note this does NOT work with the alpha template SugarCube.)\n\nTo see it in action, ''move your mouse over the words "hidden links" in the paragraph above''. Clicking them will take you to the next passage.

/* Sets color of passage text. The !important attribute makes sure it overrides any other styling provided for passage text. */\n\n.passage {\n Color: #ffffff !important; //Color of passage text\n}\n\n/* Styling the hidden link. */\n/* Sets default link color for hidden links. MUST match passage text color. Font-weight: normal removes bolding from the link. */\na.hidden:link {\n color: #ffffff !important;\n text-decoration: none !important;\n font-weight: normal !important;\n}\n\n/* Resets visited hidden links to the default color. This part is TOTALLY OPTIONAL. */\na.hidden:visited {\n color: #ffffff !important;\n text-decoration: none !important;\n}\n\n/* Sets the color and text decoration when the link is hovered over. This will turn it red and underline it. MUST be placed after all other hidden link code or it may not work properly. */\na.hidden:hover {\n color: #ff0000 !important;\n text-decoration: underline !important;\n font-weight: bold !important;\n}

Yay, you clicked the hidden link! \n\nFirst, you use JavaScript to create a passage link you can apply a special CSS class to. Then you add the CSS, making sure to create a link class where the color matches that of the regular text until you hover over it.\n\nCheck the .tws source file to see how it's done. Feel free to copy/use/modify it to suit your needs.

Sample Code: Hidden Links