Link Hover Color

I'm sure this is much simpler than I'm making it out to be, but is there anyway to change the hover color of all the links in a Gamebook?

I'd assume it's something with CSS using "a:hover" stylings but I can't figure out how to add new CSS stylings.

Or maybe it's not CSS at all. Thoughts?


I've gotten a lot of things to work in Quest via CSS, but not this particular thing.

...and I just tried for about 15 minutes, to no avail.

JS didn't help much either, but Pixie may know of a way to do it...


you probably already know of this... and are stuck with how to get it working with quest, but just in case:

https://www.w3schools.com/cssref/sel_hover.asp
https://www.w3schools.com/css/css_link.asp
https://www.w3schools.com/html/html_links.asp

'a:link' sets the hyperlink's normal (and not yet clicked on) color (the conventional normal color is blue, as we should all know, lol)

'a:visited' sets its color after its been clicked on (such as if you come back to the page, the hyperlink will now be as this color, instead its normal link color)

'a:hover' is the color of the hyperlink when you move the mouse cursor over the hyperlink and it pops up and enlarges slightly

'a:active' is the color of the hyperlink in/at the moment that you click on it.

(from the upper/first link above), these are the font color controls for different mouse actions via with hyperlinks:

/* unvisited link */
a:link {
    color: green;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: yellow;
}

You need to add this in full Code View:


    <css><![CDATA[
    <style>
    a:hover {
      color:green !important;
    }
    </style>   ]]></css>
    <start type="script">
      JS.addText (game.css)
    </start>

It should go between the firstpublished element and the end of the game element, like so:

  <game name="coloured typewriter">
    <gameid>e793682d-d417-4d5e-9104-34337f39b060</gameid>
    <version>1.0</version>
    <firstpublished>2017</firstpublished>
    <css><![CDATA[
    <style>
    a:hover {
      color:green !important;
    }
    </style>   ]]></css>
    <start type="script">
      JS.addText (game.css)
    </start>
  </game>

NOTE: If you have a start script already, just add the line JS.addText (game.css) to it after adding the css attribute.


You can't see my cursor/pointer, but you can see that the link is green:

image


I got it working.
Thank you so much!


Log in to post a reply.

Support

Forums