Hover Link Color (Harlowe)

Comments

• greyelf

  September 2015 edited September 2015

  Harlowe has three different types of basic links and each produces slightly different HTML.

  1. Markup - [[Next Passage]]  (this produces the same HTML as the link-goto macro)
  
  2. Named Hook with Click Macro - [Next Passage]<link|(click: ?link)[(goto: "Next Passage")]
  
  3. Link Macro - (link: "Next Passage")[(goto: "Next Passage")]
  

  The following CSS will style all three types:

  .enchantment-link, tw-link {
  	color: white;
  }
  
  .enchantment-link:hover, tw-link:hover {
  	color: white;
  }
  

  
  note: If you make your links (and thier hovers) the same colour as your standard text then it may be difficult for some Readers to find the links because they may not notice the mouse cursor shape changes.
• checkprivilege

  September 2015

  Perfect, thank you! I didn't realize it coded the different ways of creating links differently.
  
  And, yes, I'm aware of the potential for confusion. I just wanted to get it off the default cyan, and I'm so far from beta testing it doesn't matter too much. But thanks for point it out all the same.
• PixelRecall

  September 2015

  This was super helpful for me, but I've found myself in an interesting related problem (in Harlowe).
  
  I'm trying to use:
  
  (text-color: "green")[LinkLinkLink]
  
  AND still then have the hover color change, which isn't happening with this code. Regular links are working fine, but if I individually change a link's initial color via the above example I gave, no hover color change occurs. Help?
• greyelf

  September 2015 edited September 2015

  By default the (text-color:) macro does not effect the Text part of markup links because their associated colours are hard-wired. So your example should show a Blue (#4169E1) link, which changes to Light Blue/Aqua (#00bfff) when you hover your mouse cursor over the link.
  
  For the (text-color:) macro to be able to change the colour of markup links you would need to change the default colour of them to inherit, but you don't want to do this for all markup links so you need to use a more advanced CSS selector that only targets markup links that are within the associated hook of a (text-color:) macro.
  
  Try adding the following to the bottom of your Story Stylesheet:

  tw-expression[name="text-color"] + tw-hook tw-link {
  	color: inherit;
  }
  

  notes:
  a. This should work on most modern web-browsers.
  b. That CSS selector is crafted to work with your example markup link, it may not work in other use-cases or with other link types.
  
  The selector used is based on the following HTML which is what Harlowe generated for your example:

  <tw-expression type="macro" name="text-color" title="(text-color: \"green\";)"></tw-expression>
  <tw-hook style="color: green;">
  	<tw-expression type="macro" name="link-goto" title="(link-goto:\"LinkLinkLink\",\"LinkLinkLink\")">
  		<tw-link tabindex="0" passage-name="LinkLinkLink" data-raw="">LinkLinkLink</tw-link>
  	</tw-expression>
  </tw-hook>