Please please please let each state have its own mouseover

This is probably my number one barrier to effective use. I design for cross-platform and I need three states for everything: macOS Aqua, macOS Dark and Windows (currently, no dark for Windows but it will come). I am creating some phenomenal workarounds to get the mouseover for each state (aka skin) but it should not be so hard, really!

1 Like

Here’s a challenge: in this document there is a menu that can be switched from macOS Aqua to Dark to Windows. No problem, each skin has its own state. For the mouseover, I had to create three different widgets, each with its own mouseover state. So far, so good. here’s the snag though: for the text, I need a mouseover state for macOS Aqua only. For Windows, the text retains its colour, for macOS Dark as well. I absolutely do not want to have three text objects because that means I have to enter the text three times (and manage three text blocks. This is already bothersome for the mouseover states).
Any ideas anyone?
Mouseover Challenge.atype.zip (254.6 KB)

I am using mouse enter and mouse leave on the mouseover widgets for the menu now, combined with a custom state normal - mouseover. That seems to work quite well. Still requires the three mouseover widgets but at least now each of them can trigger a different mouseover state for the text element if need be.
[EDIT]
This did not work. For some reason, mouse in and out do no twork reliably or the events are fired too slowly so back to individual text objects., see this post.

Perhaps not 100 percent what you need, but I use CSS variables for similar cases. Here is an example with 3 states and different hover colors.
HoverPerState.zip (190.7 KB)

Pretty neat idea using the variable on the parent. I did not know I could do this. I’ll try how far I get with this!

In addition, you can use colors from your project i.e.: var(–id944436897l).
But be careful, these cant be used across multiple files.

Gotcha. I’m on it now. Looking good so far.

OK, the stumbling block is the text colour. The text needs to switch from #000 to #fff on hover for one of the states only. For the other states is is unaffected. How would you solve this?

Can be achieved with a different structure, but I would not recommend it :smiley:
HoverPerState.zip (251.6 KB)

It does not work unless I am overlooking something because you are nesting the text inside another widget, thereby losing the states of the top widget. The challenge is to still allow to change the font family per state!
This is a tough one!

I have only changed the text color for the “Dark” state. Changing the font family can also be achieved with CSS variables.
HoverPerState.zip (273.8 KB)

2 Likes

I am humbled. This worked. Why would you not recommend it? :slight_smile:

Ok, I can see why it is not a recommended workflow becuse of the amount of CSS you have to copy and paste. But hey, I’m not complaining. IT SOLVED MY PROBLEM :slight_smile:

Menu

What was an unmanageable mess before has been now reduced to this, for my menus:
image
This is great! I have tried for months to get this right.

The only downside is the sheer amount of text I have to copy and paste because I had to include the menu tips as encoded inline SVGs. Is there a way to link portions of this css to the cells it is used in? Maybe by copying it into the document bundle and referencing it somehow? Then, that would be even better!

(Disregard the classes, I am only using them to be able to use VSCode’s markup check)

.MenuAqua{
	--background:								#fff;
	--borderRadius:							5px;
	--boxShadow: 								inset 0px 0.5px 0px 0.5px rgba(255,255,255,0.5), 
															inset 0 0 0 0.5px rgba(0,0,0,0.25), 
															0 0.5px 0 0.5px rgba(0,0,0,0.04), 
															0 -0.5px 0.5px 0px rgba(0,0,0,0.03), 
															0 0.5px 0.5px 0px rgba(0,0,0,0.05);
	--boxShadowHover:						inset 0px 0.5px 0px 0.5px rgba(255,255,255,0.5), 
															inset 0 0 0 0.5px rgba(0,0,0,0.25), 
															0 0.5px 0 0.5px rgba(0,0,0,0.04), 
															0 -0.5px 0.5px 0px rgba(0,0,0,0.03), 
															0 0.5px 0.5px 0px rgba(0,0,0,0.05);
	--textColour:														#000;
	--fontFamily: 							SF Pro Display;
	--fontSize: 								12.5px;
	--fontWeight: 							500;
	--padding:									2px 3px 2px 9px;	
	--boxShadowTip: 						0 0 0 0.5px #848484;
	--boxShadowHoverTip: 				0 0 0 0.5px #848484;
	--borderRadiusTip: 					3.5px;
	--backgroundTip:					 	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M6.8,5.019a.7.7,0,0,1-.5-.205L4,2.509,1.7,4.814a.7.7,0,0,1-.99-.99l2.8-2.8a.7.7,0,0,1,.99,0l2.8,2.8a.7.7,0,0,1-.5,1.2Z' style='fill:%23fff'/%3E%3Cpath d='M4,11.08a.7.7,0,0,1-.5-.205l-2.8-2.8a.7.7,0,0,1,.99-.99L4,9.391l2.3-2.3a.7.7,0,0,1,.99.99l-2.8,2.8A.7.7,0,0,1,4,11.08Z' style='fill:%23fff'/%3E%3C/svg%3E") center / 8px 12px no-repeat #848484;
	--backgroundHoverTip:				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M6.8,5.019a.7.7,0,0,1-.5-.205L4,2.509,1.7,4.814a.7.7,0,0,1-.99-.99l2.8-2.8a.7.7,0,0,1,.99,0l2.8,2.8a.7.7,0,0,1-.5,1.2Z' style='fill:%23fff'/%3E%3Cpath d='M4,11.08a.7.7,0,0,1-.5-.205l-2.8-2.8a.7.7,0,0,1,.99-.99L4,9.391l2.3-2.3a.7.7,0,0,1,.99.99l-2.8,2.8A.7.7,0,0,1,4,11.08Z' style='fill:%23fff'/%3E%3C/svg%3E") center / 8px 12px no-repeat #848484;
	--widthTip:									15px;
	--heightTip:								15px;
	--textLeftMargin:						9px;
}
.menuDark{
	--background:							#666666;
	--borderRadius: 						5px;--fontFamily: SF Pro Display;
	--boxShadow: 								inset 0 0.5px 0 0px rgba(255,255,255,0.2), 
															inset 0 1px 0 0px rgba(255,255,255,0.05), 
															0 .5px 0 0 rgba(0,0,0,.13), 
															0 1px 0.5px 0.5px rgba(0,0,0,.05);
	--boxShadowHover: 					inset 0 0.5px 0 0px rgba(255,255,255,0.2), 
															inset 0 1px 0 0px rgba(255,255,255,0.05), 
															0 .5px 0 0 rgba(0,0,0,.13), 
															0 1px 0.5px 0.5px rgba(0,0,0,.05);
	--textColour:								#fff;
	--fontFamily: 							SF Pro Display;
	--fontSize: 								12.5px;
	--fontWeight: 							500;
	--padding:									2px 3px 2px 9px;	
	--boxShadowTip: 								0 0 0 0.5px rgba(255,255,255,0.6), 
															0 0.5px 0 0.5px rgba(0,0,0,0.3), 
															0 0.5px 0.5px 1px rgba(0,0,0,0.07);
	--boxShadowHoverTip: 				0 0 0 0.5px rgba(255,255,255,0.6), 
															0 0.5px 0 0.5px rgba(0,0,0,0.3), 
															0 0.5px 0.5px 1px rgba(0,0,0,0.07);
	--borderRadiusTip: 					3.5px;
	--backgroundTip:					 	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M6.8,5.019a.7.7,0,0,1-.5-.205L4,2.509,1.7,4.814a.7.7,0,0,1-.99-.99l2.8-2.8a.7.7,0,0,1,.99,0l2.8,2.8a.7.7,0,0,1-.5,1.2Z' style='fill:%232e2e2e'/%3E%3Cpath d='M4,11.08a.7.7,0,0,1-.5-.205l-2.8-2.8a.7.7,0,0,1,.99-.99L4,9.391l2.3-2.3a.7.7,0,0,1,.99.99l-2.8,2.8A.7.7,0,0,1,4,11.08Z' style='fill:%232e2e2e'/%3E%3C/svg%3E") center / 8px 12px no-repeat #b1b1b1;
	--backgroundHoverTip:				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M6.8,5.019a.7.7,0,0,1-.5-.205L4,2.509,1.7,4.814a.7.7,0,0,1-.99-.99l2.8-2.8a.7.7,0,0,1,.99,0l2.8,2.8a.7.7,0,0,1-.5,1.2Z' style='fill:%232e2e2e'/%3E%3Cpath d='M4,11.08a.7.7,0,0,1-.5-.205l-2.8-2.8a.7.7,0,0,1,.99-.99L4,9.391l2.3-2.3a.7.7,0,0,1,.99.99l-2.8,2.8A.7.7,0,0,1,4,11.08Z' style='fill:%232e2e2e'/%3E%3C/svg%3E") center / 8px 12px no-repeat #b1b1b1;
	--widthTip:									15px;
	--heightTip:								15px;
	--textLeftMargin:						9px;
}

.menuWindows{
	--background:							#fff;
	--borderRadius: 						0;
	--boxShadow: 								inset 0 0 0 0.5px rgba(0,0,0,0.3);
	--boxShadowHover:						inset 0 0 0 0.5px #3299ff;
	--textColour:							#000;
	--fontFamily: 							Segoe UI;
	--fontSize: 								12.5px;
	--fontWeight: 							500;
	--padding:									0 0 0 5px;
	--backgroundTip:						url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpolyline points='0 0 10 0 5 5 0 0'/%3E%3C/svg%3E") center / 7px 4px no-repeat #f0f0f0;
	--boxShadowTip:							inset 0 0 0 0.5px rgba(0,0,0,0.3);
	--backgroundHoverTip:				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpolyline points='0 0 10 0 5 5 0 0'/%3E%3C/svg%3E") center / 7px 4px no-repeat #c2e1ff;
	--boxShadowHoverTip:				inset 0 0 0 0.5px #3299ff;
	--widthTip:									21px;
	--heightTip:								21px;
	--textLeftMargin:						5px;
}



.HoverLayerMenu{
	background: 								var(--background);
	border-radius: 							var(--borderRadius);
	box-shadow: 								var(--boxShadow);
	padding: 										var(--padding);
}		

.HoverLayerMenu:hover{		
	background: 								var(--background);
	border-radius: 							var(--borderRadius);
	box-shadow: 								var(--boxShadowHover);
	padding: 										var(--padding);
}		


.MenuTip{		
	background: 								var(--backgroundTip);
	box-shadow: 								var(--boxShadowTip);
	border-radius:							var(--borderRadiusTip);
	width:											var(--widthTip);
	height:											var(--heightTip);
}		

.MenuTip:hover{		
	background: 								var(--backgroundHoverTip);
	box-shadow: 								var(--boxShadowHoverTip);
	border-radius:							var(--borderRadiusTip);
	width:											var(--widthTip);
	height:											var(--heightTip);
}

.menuText{
	margin-left:								var(--textLeftMargin);
	color: 											var(--textColour);
	font-family:								var(--fontFamily);
	font-family: 								var(--fontFamily);
	font-size: 									var(--fontSize);
	font-weight: 								var(--fontWeight);
}