chanan / BlazorStyled

CSS in Blazor Components
https://blazorstyled.io
The Unlicense
191 stars 19 forks source link

Could you explain to me how to use the PsuedoClasses.Hover please? #115

Open DataJuggler opened 2 years ago

DataJuggler commented 2 years ago

My first reaction is this doesn't work, but most likely I don't know how to use it.

I created a new site that uses BlazorStyled:

Blazor Excelerate - Code Generate C# Classes From Excel Header Rows Code: https://github.com/DataJuggler/Blazor.Excelerate Live Demo: https://excelerate.datajuggler.com

I tried several ways to turn a link color orange on hover, when I have this class:

<Styled @bind-Classname="DownloadLink2">
background: none !important; border: none; padding: 0 !important; font-family: Verdana; text-decoration: none; cursor: pointer;
height: 2.04vh; line-height: 2.04vh; font-size: @LargeTextSizeStyle; font-weight: normal; position: relative;
display: inline-block; left: 114%; top: .4vh; margin-top: .4vh; z-index: 41;

Then I tried a few different ways of using the same class name DownloadLink2 and creating another BlazorStyled entry with a PsuedoClasses.Hover:

<Styled @bind-Classname="DownloadLink2" PseudoClass="PseudoClasses.Hover">
color: orange;

And I tried another string variable

<Styled @bind-Classname="DownloadLink2Hover" PseudoClass="PseudoClasses.Hover">
color: orange;

And none of this worked. The only way I could get it to work is going to my site.css, and creating this:

.downloadlink2hover { color: white; } .downloadlink2hover:hover { color: orange !important; }

Added a second class entry to my download link.

@Response.FileName

I would like to have done this all with BlazorStyled if I knew how.

Is this possible with just BlazorStyled?

Many Thanks,

Corby

chanan commented 2 years ago

The example on the homepage of https://blazorstyled.io use Hover to change the color of the text to white. Does that not do what you were expecting?

DataJuggler commented 2 years ago

I will try it again as soon as I get a chance. I am pretty sure that is what I tried.

Thanks for the reply

From: Chanan Braunstein @.> Sent: Monday, November 1, 2021 5:00 PM To: chanan/BlazorStyled @.> Cc: Corby Nichols @.>; Author @.> Subject: Re: [chanan/BlazorStyled] Could you explain to me how to use the PsuedoClasses.Hover please? (Issue #115)

The example on the homepage of https://blazorstyled.io use Hover to change the color of the text to white. Does that not do what you were expecting?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/chanan/BlazorStyled/issues/115#issuecomment-956700937, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGI4P7K2COFIBLNWLCNLWZDUJ4EXDANCNFSM5GWO74MQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.