Can't remove default hover over link styling.

Jellyfoosh

Hey everyone!

I'm on SugarCube 2.18, Twine 2.1.3, and I can't seem to remove the default effects when hovering over links.

This is my css for the links:

a {
  color: DarkSlateGray;
  border-bottom: 1px solid DarkSlateGray;
}
a: hover {
 text-decoration: none;
}

I'd like to have the links not change at all when mousing over them. "text-decoration: none" doesn't seem to do anything. If anyone has any idea what I'm doing wrong, it would be much appreciated.

Jellyfoosh

Sorry, I just realised that I had a space between "a:" and "hover".

Removing the space caused the default extra underlining to go away, but the text still changes color to the default.

Jellyfoosh

As a follow-up to this question, how can I change the hover color for a specific passage?

I've tried two ways, neither of which work:

a.forest:hover {
  text-decoration: none;
  color: #bbc3cc;
  border-bottom: 1px solid #bbc3cc;
}

and

a:hover.forest {
  text-decoration: none;
  color: #bbc3cc;
  border-bottom: 1px solid #bbc3cc;
}

greyelf

Based on the structure of your example I am assuming you are assigning a forest tag to the Passage, and that you would like to control the styling by using that tag.

The tag information is not added to each element within the Passage's contents, which is why your examples are not working.

If you use your web-browser's built-in Developer Tools to Inspect the HTML generated for the page you will notice that a Passage Tag assigned to a Passage gets added to five locations in SugarCube 2.18.0

a. The html element as a member of it's data-tags property.

b. The body element as a member of both it's class and data-tags properties.

c. The .passage classed div element as a member of both it's class and data-tags properties.

You can use CSS selectors based on any of the above to implement your styling, the following shows two (of the many) ways you could achieve what you want, the second is slightly more precise than the first.

.forest a:hover {
  text-decoration: none;
  color: #bbc3cc;
  border-bottom: 1px solid #bbc3cc;
}

.passage.forest a:hover {
  text-decoration: none;
  color: #bbc3cc;
  border-bottom: 1px solid #bbc3cc;
}

Jellyfoosh

I see, thanks! Got it working.