FontAwesome passage Links with hover effect - Twine2 SugarCube2

Authoring Twine
1

Hello, how can I use FontAwesome to create passage links that change color on Hover?
I have achieved ½ of the solution but hovering the link-text does not change/highlight the icon.

Currently I’m using TheMadExile’s Solution from twinery.org,

<<link '<i class="fas fa-shopping-basket fa-fwtravel"></i> Corner Pick & Pay' "Loc02">><</link>>

via applying a hover effect via css

.fa-fwtravel {
    text-align: center;
    font-size: 18px;
    width: 1.25em;
    text-shadow: 0px 0px 1px black, 0 0 4px #c0c0c0, 0 0 4px #000;
    color: #c0c0c0;
    cursor: pointer;
}
.fa-fwtravel:hover {
    text-align: center;
    font-size: 18px;
    width: 1.25em;
    text-shadow: 0px 0px 1px black, 0 0 4px #c0c0c0, 0 0 4px #000;
    color: #ffdc00;
    cursor: pointer;
}

.link-internal:hover {
    color: #ffdc00;
}

Which works fine, hovering the icon highlights both, but when hovering the text the icon does not:
Example

How can I make the Whole link change when hovering either the icon or link?

Using Twine 2.2.1 SugarCube 2.28.2 on the offline editor

3 Likes
2

When you write .fa-fwtravel:hover in your CSS, you’re telling the browser that “these rules apply to elements with class fa-fwtravel (icons) that are currently being hovered”. But that isn’t quite what you want. Instead, you want the rules to apply to icons that are inside a currently-hovered link. The CSS selector for that would look like .link-internal:hover .fa-fwtravel.

Also, you don’t need to repeat the lines for text-align, font-size, and so on. .fa-fwtravel's rules will still apply even when it’s being hovered over. So your final CSS might look something like this:

.fa-fwtravel {
    text-align: center;
    font-size: 18px;
    width: 1.25em;
    text-shadow: 0px 0px 1px black, 0 0 4px #c0c0c0, 0 0 4px #000;
    color: #c0c0c0;
    cursor: pointer;
}
.link-internal:hover .fa-fwtravel {
    color: #ffdc00;
}
.link-internal:hover {
    color: #ffdc00;
}

Hope this helps!

2 Likes
3

TY! @ cartr

4

FYI I’ve made many strides with my project.
Thank you again for the advice!