Howdy, Stranger!

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

[Twine 2.1.3a][Harlowe 2.0.1] Is there a way to change some of the mouseout macros...

When I use mouseout-replace, mouseout-append, and mouseout-prepend, at first when hovering the cursor over the piece of text, it is surrounded by this light blur colour. Then after you click it, it is surrounded by the same light blue colour until you let go of the click and does what it suppose to do.

Is there a piece of CSS that I can use to change the colour of it or just get rid of it in general? The colour is #d0e5ef.

Here what it looks like:
My deepest secret.
(mouseout-replace: "secret")[longing for you]

What should I do?

Comments

  • note: The following contains information that make differ depending on which operating system you run and which brand of web-browser you are using, I suggest reading the documentation of your particular brand of web-browser for further details.

    You can use your web-browser's built-in Developer Tools to Inspect the HTML Elements generated by your example, it will something like the following.
    My deepest 
    <tw-enchantment class="enchantment-mouseout">secret</tw-enchantment>
    .
    <br>
    <tw-expression type="macro" name="mouseout-replace"></tw-expression>
    <tw-hook></tw-hook>
    


    If you highlight the "enchantment-mouseout" related tw-enchantment element in your Elements section of the Developer Tools you will see it has a default CSS of:
    .enchantment-mouseout {
        border: rgba(64,149,191,0.25) 1px solid;
    }
    

    If you used the Developer Tools to simulate the element's hover state you will see the following CSS is being used to style that element in that state:
    .enchantment-mouseout:hover {
        background-color: rgba(64,149,191,0.25);
        border: transparent 1px solid;
        border-radius: 0.2em;
    }
    
    ... you can use this last CSS selector to custom how you want it look when the mouse cursor is over the marked text, that CSS needs to be placed in your story's Story Stylesheet area.
  • Thank you so much greyelf! It took a bit to figure out how to get rid of the colours, but I'm all set!
Sign In or Register to comment.