How can I hide the color change on mouse over of links?

DarkGriffin

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:

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.)

DarkGriffin

Oh my gosh I'm so blooming silly today. Solved just after posting, leaving in case others make the same silly mistake.

The code for setting the property of hover is like this:

tw-link:hover

NOT

tw-link.hover

Note the small double : instead of the .
That's cause we are reading the PROPERTY of the tw-link object.
If we were instead accessing a child object of tw-link named hover, the . version would be correct.

So the corrected version of the above, just for reference:

.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(243, 243, 123, 1);
	text-decoration: none;	
	font-weight: normal;
	transition: none;
}

And now that the css code is actually referencing the correct objects on the page, now we can change all those fancy colors and sizes and other fun properties.

This is what I get for trying this when I am tired, lol. Hopefully someone at least can learn from it.

greyelf

Well done.

If you had search for "link color" or "link colour" using the Forum's search field you would of found a number of previous topics related to controlling the colour of Harlowe links.

Two small corrections:

1. The colon : in a CSS Selector is used to represent/reference a CSS Pseudo-class of an element, which in your case represents the link state (hover) of the tw-link.

2. A full-stop . in a CSS Selector is used to represent/reference a CSS .class of an element, it is a way of identifying/separating one group of elements from another group.

note: In HTML the nodes that make up the page are generally known as elements not objects, although they are sometime also called tags.