Web 2.0: Pseudo class selectors in WebStyles?

Hi there!
As most of us, I’m trying to find my way around the Web 2.0 Framework.
Having zero previous web development experience, I was quite comfortable with the WebStyles system of the first framework. It made sense to me, in a RADdish way :slight_smile:

I’m now running into this issue:
Say I want to custom-color a button using a CSS property, so I put this in the Opening event of the button:

me.Style.Value(“background-color”) = “coral”

…and it works fine!
But what if I want to set the color (or any other property, really) when it is being hovered by the cursor?
How do I set the background-color of :hover ?

Is it possible to do this via WebStyles?
If not, how would you go about doing it?


I did a quick search (no CSS expert) and it looks like the hover is not (easy) available as a direct Style.Value.

You will need some help with Xojo code that could add the CSS class to the control, like @Brock_Nash (he posted the code sample in the forum) or @Lars_Lehmann github https://github.com/StadtLandNetz/Xojo-Web-2.0-Style-Converter

This gives you the ability, if you write your own CSS.

With the Xojo onboard-functionalities :hover on labels doesn’t work anymore. Also because they decided to not implement mouseEvents like “mouseOver” and such.

Why you say :hover on labels doesn’t work anymore?

This is a regular label on Web 2.0:

This is the same label when I “hover” over it:

I have this code (App HTML Header):

label:hover {
color: rgba(190,0,0,1.00) !important;}

I said “With the Xojo onboard-functionalities”

Altering the CSS over the HTMLHeader of the App is not really an onboard-functionality, like the old Style-Editor provided.

So yes - CSS works. But with pure Xojo/Xojo-Code you won’t be able to change to color on mouse hover.

Oh, ok, sorry about that.

1 Like

Okay, doing it via WebStyles is no longer possible.
Alberto’s trick in the HTML header is interesting, but it’s global in nature.
What I’m interested in, is changing the hover behavior of a single button/label/whatever on a single webpage. Not all of them as a class, everywhere.

I think it’s a reasonable, simple thing to ask and I find it hard to believe that it has got so complicated.
Unless I’m missing something very fundamental here, which is not unlikely.

for example, a nice, elegant way of doing it could have been:
me.Style.Value(“background-color” , "hover") = “coral”

I guess, my question becomes: how do you arbitrarily change CSS properties of an single control without involving WebStyles?

There’s not really anything out of the box to do this right now. My GraffitiStyle class, however, can accomplish what you’re looking for.

As an example, untested:

var myButtonClass as GraffitiStyle = GraffitiStyle.Create( Session, "myButtonClass", "background:rgba(0, 0, 0, 0.2);color:#00f" )
var myButtonClassHover as GraffitiStyle = GraffitiStyle.Create( Session, "myButtonClass", "background:rgba(0, 0, 0, 0.8);color:#f00", GraffitiStyle.States.Hover )

just have a look at this

It combines CSS and a new class of Webstyle, so you can decide per control which style you want to apply.

It is similar to @Anthony_G_Cyphers GraffityStyle classes with the difference, that you set in my Classes the CSS in the HTMLHeader, not in Xojo-code.

Anthony, Lars, thank you for your suggestions. I’ll look into them.

For the record, I really think that such functionality ought to be part of the framework.
I hope it reaches a level of maturity where we won’t be needing to resort to workarounds like these to respond to such ridiculously simple and common requirements. Especially when it used to be there and it was taken away!

1 Like