Edit: Solved it myself after a moment away from the screen. Turns out nearly everything was correct, but I was using . where I should have been using : instead. Derp.
For thematic reasons related to my story, I want to completely hide the link text as normal text within my descriptive paragraphs. I do realize this is normally a very bad design decision. My writing is such that the player should still know what to click even without the aid of the link colors, assuming they are actually reading. The idea is the player has to "explore" my descriptive text and use their intuition of what might be clickable to find their way through.
The below code is still highlighting links blue when the mouse is over them despite the (admittedly rather shotgun) hover definitions at the end. I can't seem to get hover or active to do anything to the final appearance in both test and play mode.
I am using Harlowe.
My css currently looks like this, after much head banging and researching possible things to type:
I think I got just about every type of element related to hover I could find on the w3 site docs. The links DO color and look like regular text now (no more bold links).
Except when the user mouses over them, they still light up blue, and show up red when clicked on.
I tried using chrome to poke around the layout in debug mode, but didn't see anything else tagging the link in the debugger. (I'm not sure how to use the css debugging tool beyond right clicking and picking inspect, and couldn't find any red or blue colors in there. So I might have missed it somewhere.)
For thematic reasons related to my story, I want to completely hide the link text as normal text within my descriptive paragraphs. I do realize this is normally a very bad design decision. My writing is such that the player should still know what to click even without the aid of the link colors, assuming they are actually reading. The idea is the player has to "explore" my descriptive text and use their intuition of what might be clickable to find their way through.
The below code is still highlighting links blue when the mouse is over them despite the (admittedly rather shotgun) hover definitions at the end. I can't seem to get hover or active to do anything to the final appearance in both test and play mode.
I am using Harlowe.
My css currently looks like this, after much head banging and researching possible things to type:
html {
background-color:rgba(0,0,0,1);
}
tw-story {
color:rgba(243, 243, 123, 1);
text-decoration: none;
transition: none;
font-size: 150%;
}
.enchantment-link, tw-link {
color:rgba(243, 243, 123, 1);
text-decoration: none;
font-weight: normal;
transition: none;
}
.enchantment-link.visited, tw-link.visited {
color:rgba(243, 243, 123, 1);
text-decoration: none;
font-weight: normal;
transition: none;
}
.enchantment-link.active, tw-link.active {
color:rgba(243, 243, 123, 1);
text-decoration: none;
font-weight: normal;
transition: none;
}
.enchantment-link.hover, tw-link.hover, a.hover {
color:rgba(255, 255, 255, 1);
text-decoration: none;
font-weight: normal;
transition: none;
}
I think I got just about every type of element related to hover I could find on the w3 site docs. The links DO color and look like regular text now (no more bold links).
Except when the user mouses over them, they still light up blue, and show up red when clicked on.
I tried using chrome to poke around the layout in debug mode, but didn't see anything else tagging the link in the debugger. (I'm not sure how to use the css debugging tool beyond right clicking and picking inspect, and couldn't find any red or blue colors in there. So I might have missed it somewhere.)