How to make text change when cursor hovers over text

Authoring Twine
1

Twine Version: Harlowe 3.3.9

I want to make it so that when the player hovers their cursor over the text, it changes, and when they move their cursor off of the word, it changes back to what it originally was.

I tried to do some of the code, but for some reason it wasn’t working and wouldn’t display anything at all.

(align:“=><=”)+(mouseover-replace:“A dinosuar”)[[Be a Deinonychus]]

2

The argument you pass to the (mouseover:) family of macros is either:

  • the name of a Named Hook the macro’s effect is being applied to.
  • the Text to search for in the page, which the macro will apply its effect to.

The following demonstrates how to: define a Named Hook named apples, how to target that Named Hook with a (mouseover-replace:) macro that replaces the original content of that Hook, and how to target the same Named Hook with a (mouseout-replace:) macro to replace the alternative content with a copy of the original.

[Original Text]<apples|

(mouseover-replace: ?apples)[Replacement Text]
(mouseout-replace: ?apples)[Copy of Original Text]

warning: The (mouseover:) and (mouseout:) family of macros have been deprecated, and the documentation suggests using the (action:) macro instead.
The following demonstrates how to implement the above using (action:).

[Original Text]<apples|

(click-replace: ?apples, (action: "mouseover"))[{
	Replacement Text
	(click-replace: ?apples, (action: "mouseout"))[Copy of Original Text]
}]

…as you can see, the code is a little more complex.

note: By now you’ve likely discovered, if you tried either of the above solutions, that the mouseover or mouseout events being reacted to only work a single time for each target.
eg. placing the mouse cursor over the same original content multiple times will not cause the replacement content to be shown multiple times.

And if that is your goal then the solution to doing that is a lot more complex than either of the above solutions.

2 Likes
3

If the goal is to do it multiple times, I believe CSS could be used with :hover and in the CSS, you change the content attribute.

1 Like