How do I style a piece of text with a changer macro applied to it?

Tipping

Hi,
I'm learning to use Harlowe, and I'm just getting the hang of styling text using classes. Everything seems to work except for the text that uses changer macros. For example

|moan>[a low moan,] (click-replace: ?moan)[wind through trees,]

This text was the wrong color, so I made a new class for it.

<span class="changeClass">|moan>[a low moan,] (click-replace: ?moan)[wind through trees,]</span>

That mostly worked, but the hover color is still wrong. This is the css I'm using for the hover styling:

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

I would like this text to have one hover color before it's be clicked and a different one after, but I can't figure out how to do that ether. Can anybody help?

greyelf

If you use the web-browser's Inspect Element (or equivalent) feature to look at the HTML being generated for the (click-replace:) link, for both the before and after the click event, it will look like the following examples:

Before the click:
<span class="changeClass" data-raw="">
	<tw-enchantment class="link enchantment-link">
		<tw-hook name="moan">a low moan,</tw-hook>
	</tw-enchantment>
	<tw-expression type="macro" name="click-replace"></tw-expression>
	<tw-hook></tw-hook>
</span>

After the click:
<span class="changeClass" data-raw="">
	<tw-hook name="moan">wind through trees,</tw-hook>
	<tw-expression type="macro" name="click-replace"></tw-expression>
	<tw-hook></tw-hook>
</span>

The first issue is that in the before example the hover occurs on the tw-enchantment element and in the after example the hover occurs on the tw-hook, which is why your CSS was including both in the selector.

The second issue is that both before and after contain the <tw-hook name="moan"> element, and you want to only colour one in the after example.

You can get around both these issues by making your CSS selector more precise by using the > parent/child filter:

.changeClass > .enchantment-link:hover, .changeClass > tw-hook:hover {
	color: green;
}

Tipping

Thanks! How do I change just the before example?

greyelf

The first CSS selector (.changeClass > .enchantment-link:hover) in my example changes the before, the second CSS selector (.changeClass > tw-hook:hover) changes the after.