User Tools

Site Tools


harlowe:hover-style

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

harlowe:hover-style [2017/10/09 20:39] (current)
Line 1: Line 1:
 +**(hover-style:​ // [[harlowe:​Changer|Changer]]//​) -> //​Changer//​**
  
 +Given a style-altering [[harlowe:​Changer|Changer]],​ it makes a changer which only applies when the hook or expression is hovered over
 +with the mouse pointer, and is removed when hovering off.
 +
 +=== Example usage: ===
 +
 +The following makes a [[harlowe:​link|(link:​)]] that turns cyan and italic when the mouse hovers over it.
 +
 +<​code>​
 +(hover-style:​(text-color:​cyan) + (text-style:'​italic'​))+(link:"​The lake")
 +[The still, cold lake.]
 +</​code>​
 +=== Rationale: ===
 +
 +Making text react in small visual ways when the pointer hovers over it is an old hypertext tradition. It lends a
 +degree of "​life"​ to the text, making it seem aware of the player. This feeling of life is best used to signify
 +interactivity - it seems to invite the player to answer in turn, by clicking. So, adding them to [[harlowe:​link|(link:​)]] changers,
 +instead of just bare words or paragraphs, is highly recommended.
 +
 +=== Details: ===
 +
 +True to its name, this macro can only be used for subtle style changes. Only the following changers (and combinations
 +thereof) may be given to (hover-style:​) - any others will produce an error:
 +
 +  * [[harlowe:​align|(align:​)]]
 +  * [[harlowe:​background|(background:​)]]
 +  * [[harlowe:​css|(css:​)]]
 +  * [[harlowe:​font|(font:​)]]
 +  * [[harlowe:​text-colour|(text-colour:​)]]
 +  * [[harlowe:​text-rotate|(text-rotate:​)]]
 +  * [[harlowe:​text-style|(text-style:​)]]
 +
 +More extensive mouse-based interactivity should use the [[harlowe:​mouseover|(mouseover:​)]] and [[harlowe:​mouseout|(mouseout:​)]] macros.
 +
 +This macro is not recommended for use in games or stories intended for use on touch devices, as
 +the concept of "​hovering"​ over an element doesn'​t really make sense with that input method.
 +
 +=== See also: ===
 +
 +[[harlowe:​mouseover|(mouseover:​)]],​ [[harlowe:​mouseout|(mouseout:​)]]
harlowe/hover-style.txt ยท Last modified: 2017/10/09 20:39 (external edit)