A link that only reveals itself to be clickable when the reader mouses over it, or doe

Added <a href="https://github.com/iftechfoundation/twine-cookbook/tree/master/hiddenli

Added a <a href="https://github.com/iftechfoundation/twine-cookbook/pull/18" data-hove

Hidden links about twine-cookbook HOT 3 CLOSED

iftechfoundation commented on September 14, 2024

Hidden links

from twine-cookbook.

Comments (3)

tmedwards commented on September 14, 2024

It could be done with CSS, though I think there are some issue with that. For the absolute best experience, it would either require redundant style properties or the use a tiny bit of JavaScript.

I'll try to flesh this out later, unless someone else does. For now a proof-of-concept.

CSS+JS Proof-of-Concept

The postdisplay task object is SugarCube specific, however, there are passage display events for the same purpose in Snowman and in Harlowe, I think, you could run the code at the end of the passage footer.

:: Story Stylesheet [stylesheet]
.hidden a {
	color: transparent;
}


:: Story JavaScript [script]
postdisplay['hidden-link-setup'] = function () {
	/*
		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');
		});
};


:: Start
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>


:: A hidden link
You found me!

from twine-cookbook.