Removing Default Dashed Line Under Mouseover Text (Twine Version 2.10.0, Harlowe)

Authoring Twine
,
1

Hi friends,

I’m returning to Twine after a year or two (have to relearn everything, RIP) and am trying to get back to work on an old project. I use the (mouseover-replace:) macro a fair bit (if I’m reading the guide right, that still works but you’re supposed to use the (action:) macro now?), and I noticed an old problem has unsolved itself. The default dashed line underneath mouseover text is back. I found this bit of text in my stylesheet

{
tw-link, .enchantment-mouseover {
     border-bottom: 0px dashed #999}
}

which I believe is what I used last time to make the line go away. I guess it doesn’t work anymore. I’m sure there’s a simple fix to make the line go away again, and would appreciate some help!

Thanks!

1 Like
2

Yes, Harlowe uses the newer (action:) macro now over the older, deprecated macros.

It’s tricky to learn the browser’s inspector tools at first, but it’s the best way to ensure you get at the heart of what is styling a certain element in Harlowe (or in any web page, for that matter).

tw-link.enchantment-mouseover, .link.enchantment-mouseover, tw-expression.enchantment-mouseover > tw-link {
  border-bottom: none;
}

I’ve never understood why Harlowe needs to have so many different CSS selectors for links, but there you have it.

2 Likes
3

It originally only had two, which it needed because there were two different use-cases it was trying to handle:

1: Actual Links, that may or may not cause a Passage Transition.
note: The Markup based Link syntax is just an abstraction for the (link-goto:) macro.

(link-goto: "Label of Link", "Passage to Transition To")
(link: "Do Something without a Passage Transition")[]

While each of the above macro calls create their own unique HTML structures, both include a <tw-link> element, which is basically Harlowe’s equivalent of the standard HTML <a> anchor element.

<!-- the (link-goto:) macro call -->
<tw-expression type="macro" name="link-goto" return="command">
	<tw-link tabindex="0" data-raw="">Label of Link</tw-link>
</tw-expression>

<!-- the (link:) macro call -->
<tw-expression type="macro" name="link" return="changer"></tw-expression>
<tw-hook>
	<tw-link tabindex="0" data-raw="">Do Something without a Passage Transition</tw-link>
</tw-hook>

2: Clickable areas, that can contain things other than textual content, and that may or may not cause a Passage Transition.

|target>[Label of Link]
(click-goto: ?target, "Passage to Transition To")

|thing>[Do Something without a Passage Transition]
(click: ?thing)[]

Harlowe generates almost the same HTML structure for both of the above “click” macro calls…

<!-- the (click-goto:) macro call -->
<tw-enchantment class="link enchantment-link" tabindex="0">
	<tw-hook name="target">Label of Link</tw-hook>
</tw-enchantment>
<tw-expression type="macro" name="click-goto" return="command"></tw-expression>

<!-- the (click:) macro call -->
<tw-enchantment class="link enchantment-link" tabindex="0">
	<tw-hook name="thing">Do Something without a Passage Transition</tw-hook>
</tw-enchantment>
<tw-expression type="macro" name="click" return="changer"></tw-expression>

…the only real differences is the Hook Name assigned to the <tw-hook> element and the Macro Name assigned to the <tw-expression> element that represents the macro call.

You’ll notice that the “click” macros don’t create a <tw-link> element, because while they behave in a “link” like manner they aren’t actually “links”.

2 Likes
4

Works like a charm, thank you!

1 Like