I have a hook-heavy passage, where each hook can be clicked but instead of taking the player to another passage, it just reveals or changes text elsewhere in the current one. I'd like a way to differentiate between same-passage links and different-passage links, so the player doesn't accidentally click away from the passage before exploring all the hooks. I saw another Twine story that did this (can't for the life of me remember which one), but I can't seem to emulate it.
The CSS code I have is pretty basic:
tw-hook {
color: green;
}
The only problem is, this makes all hooks green. I only want ones that are currently able to be clicked green. The way I have it now makes it so random text throughout the passage is a different color, and needless to say it looks sloppy. Is there a CSS tag that only applies to hooks that can be currently clicked?
Comments
note: To do this in Windows you first move your mouse cursor over what you want to inspect, then use the right mouse button to make the context menu appear and select the Inspect Element option.
If your passage contained the following: ... then the related generated HTML would look as follows:
If you look at the click-able hook (the one with an associated (click:)) you will notice that it's tw-hook element is contained within a tw-enchantment element and this element has two classes (link and enchantment-link), this is what makes the hook click-able.
So one way to make only click-able hooks green would be as follows: