The <<hoverrevise>>
macro is an extension of the <<revise>>
macro. It lets you make a span of passage text briefly appear or disappear whenever you mouseover another span of text in the same passage.
Code
Just install the latest version of <<revision>>
(1.1.0 or later). It's included already.
CSS
You may want a "dissolve" type of transition to be applied to the text that appears or disappears. For that, give the <<insertion>>
or <<removal>>
macro a name that, say, contains "hover", and then use this CSS to exclusively target it:
.revision-span-in[class~=hover] { opacity: 0; } .revision-span[class~=hover] { transition: 1s; -webkit-transition: 1s; } .revision-span-out[class~=hover] { position:absolute; opacity: 0; }
<<revise>>
macros, you could omit "[class~=hover]" to make every <<revision>>
span have this transition.
Usage examples
Use this in conjunction with <<revision>>
, <<insertion>>
or <<removal>>
spans, as you would with <<revise>>
. The <<hoverrevise>>
macro covers a full span of text, ending with <<endhoverrevise>>
To make the text "Aah! A ghost!" appear when you mouseover a span:
<<insertion hoverghost>>Aah! A ghost!<<endinsertion>> <<hoverrevise hoverghost>>You'd better to the chapel|chapel<<endhoverrevise>>
To make the text "Don't leave me" disappear when you mouseover a span:
<<removal words>>"Don't leave me"<<endremoval>> <<hoverrevise words>>to the beach|beach<<endhoverrevise>>
<<revision hovermetal>>Cold<<becomes>>Warm<<endrevision>> <<hoverrevise hovermetal>>Gold<<endhoverrevise>>
These are just a few of the possibilities allowed by this macro.
Notes:
This wraps the contained text in a <span>
with the class "hoverrevise" as well as "hoverrevise_" suffixed with the identifier you use (for instance, "hoverrevise_boo" for <<hoverrevise boo>>
").