:: StoryTitle
Harlowe: Hidden Link


:: UserStylesheet [stylesheet]
.hidden tw-link, .hidden .enchantment-link {
	color: transparent;
}

tw-include[title="Hidden Link Setup"] {
	display: none;
}


:: Hidden Link Setup [footer]
<script>
	/*
		Hidden links that are always hidden:
			<span class="hidden">[[A hidden link]]</span>
	*/
	$('.hidden')
		.addClass('hidden');

	/*
		Hidden links that hide unless you're hovering over them:
			<span class="hides">[[A hidden link]]</span>
	*/
	$('.hides')
		.addClass('hidden')
		.on('mouseenter', function () {
			$(this).removeClass('hidden');
		})
		.on('mouseleave', function () {
			$(this).addClass('hidden');
		});

	/*
		Hidden links that reveal themselves when you hover over them:
			<span class="reveals">[[A hidden link]]</span>
	*/
	$('.reveals')
		.addClass('hidden')
		.one('mouseenter', function () {
			$(this).removeClass('hidden');
		});
</script>


:: Start
''Examples of tw-link element based links''

A hidden link that's always hidden: <span class="hidden">[[A hidden link]]</span>

A hidden link that hides unless you're hovering over it: <span class="hides">[[A hidden link]]</span>

A hidden link that reveals itself when you hover over it: <span class="reveals">[[A hidden link]]</span>


''Examples of .enchantment-link CSS class based links''

A hidden link that's always hidden: <span class="hidden">[A hidden link]<link|</span>

A hidden link that hides unless you're hovering over it: <span class="hides">[A hidden link]<link|</span>

A hidden link that reveals itself when you hover over it: <span class="reveals">[A hidden link]<link|</span>

(click: ?link)[(go-to: "A hidden link")]


:: A hidden link
You found it!