Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Change CSS on mouseover macros

Genuinely going insane. I'm using Harlowe 2.0 and I can't find a way to change the mouseover CSS. All I want is for mouseover enchanted hooks to appear green, so a player knows they are interactive. I've tried so many methods and I can't find anything that affects their appearance. This was simple to do in Sugarcube, and it's easy enough to edit link CSS so I can't work out why every CSS selector I've tried doesn't work.


  • When trying to determine what CSS Selector to use to style a specific portion of a page I find the easiest method to so is to use your web-browsers built-in Development Tools to inspect the HTML of that portion.

    note: How to access the Development Tools can be different between web-browser brands and operating systems so I suggest you use google to find the instructions for yours. The following instructions are for Chrome on Windows 10.

    My example passage contains the following code:
    [Standand Mouseover Macro]<mouseover|
    (mouseover: ?mouseover)[]

    1. Press the F12 key to open the Development Tools window then make sure the Elements tab is selected in the tab bar of the left panel.

    2. Press CTRL+F to open search and enter the text contained within the target named hook, in my example that is Standand Mouseover Macro. The second instance of that text should be contained within a block of HTML that looks something like the following:
    <tw-enchantment class="enchantment-mouseover">
    	<tw-hook name="mouseover">Standand Mouseove Macro</tw-hook>
    (note: CTRL+F means hold down the CTRL key then press the F key.)

    3. You will notice that the class of the tw-enchantment element is enchantment-mouseover, this is the class you need to target in your CSS.

    4. If you click on the <tw-enchantment class="enchantment-mouseover"> line within the Elements window then look at the right panel of the development tools you should see the related CSS Selector and the CSS currently being used to style it. (assuming that the Styles tab is selected in that panel)

    5. CSS like the following will alter the fore-ground colour of the relevant text.
    .enchantment-mouseover {
        color: green;

    P.S This comment within the Harlowe -Changing color of text... thread explains the CSS Selectors of two other link types.
  • Oh my god I knew it would be something simple like this!! I knew about how to inspect the page, but just not the bit that was a class. Thank you so much!!!!!
Sign In or Register to comment.