Removing rectangular menu border/background on hover

Authoring Twine
1

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

Apologies because I feel like this is quite basic but I can’t figure it out for the life of me.

I’m customising my Sugarcube menu, and I’ve managed to remove all of the borders so it looks like the first image here. But when it’s hovered over, it still has the rectangle outline/border/background (I’m not sure what it is) that’s in image 2. I want to get rid of this, so on hover it’ll just light up the text rather than also have the rectangle behind it.

Sorry if the code is terrible, this is my first foray into CSS and a lot of it is just a mishmash of stuff I’ve found online. Here’s what’s in the stylesheet:

#menu li a:hover {
	border: none
	outline: none;
}

#menu li a {
	border: none;
}

#menu ul {
	border: none;
}
#menu li:not(:first-child) {
	border-top: none;
}

#menu-item-saves a {
	padding: 4px 12px !important;
	font-size: 0px;
 	font-family: 'Roboto', sans-serif;
}
#menu-item-saves a:before {
	font-size: 18px;
	content: "\2B73\00a0";
}
#menu-item-saves a:after {
	font-size: 18px;
 	font-family: 'Roboto', sans-serif;
 	text-transform: none;
	content: "Saves";
}

 #menu-item-restart a {
	padding: 4px 12px !important;
	font-size: 0px;
  	font-family: 'Roboto', sans-serif
}
 #menu-item-restart a:before {
	font-size: 18px;
	content: "\2B6F\00a0";
}

#menu-item-restart a:after {
	font-size: 18px;
 	font-family: 'Roboto', sans-serif;
 	text-transform: none;
	content: "Restart";
}

 #menu-story a {
	padding: 4px 12px !important;
	font-size: 0px;
  	font-family: 'Roboto', sans-serif
}

#menu-story a:after {
	font-size: 18px;
 	font-family: 'Roboto', sans-serif;
 	text-transform: none;
	content: "Characters";
}

a {
	color: #FFB494 !important;
}
a:hover, a:focus {
	filter: brightness(1.4)
	outline: none
}

I’ve spent hours now inspecting other Twine stories in dev mode with the hover element state, but I can’t seem to find how they differ. Any help would be greatly appreciated!!

2

I believe what you’re seeing is a background-color style on #menu li a:hover?

3

Ahh I knew it was a simple solution, thank you! I managed to remove the background by setting it to transparent. Only problem is, now the text/unicode icons don’t light up upon being hovered over. Is there any way to make the text change brightness upon hover, but keep the transparent background for the save/restart menu items?

EDIT: Nevermind, got it!! Just a matter of changing the text colour :sweat_smile: Code for anyone else who needs it in future:

#menu li a:hover {
	background-color: transparent;
	filter: brightness(1.4);
}
1 Like