Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

Add a special ACSS event for :hover #209

Closed bob2517 closed 2 years ago

bob2517 commented 2 years ago

There isn't a hover event in JS (someone correct me if I'm wrong).

I'm about to push up 2.9.0, and I'm thinking that newbies will possibily try out hover as an event - not knowing there isn't a hover event, and then go "oh, that didn't work - it doesn't work".

Thinking about it's practically, it would be good to have one. Currently, hover gets used a lot for styling. But what if it could be used to set off ACSS actions? Like display a help box or something more complex? Might be useful. It would also provide an example of what it could look like if it was actually in CSS.

Investigate this - it would probably be tied into mouseover. Internally it could simply set off a mouseover ACSS event and cancel any outstanding commands on the mouseout.

Comments appreciated.

bob2517 commented 2 years ago

I'm going to do this for 2.10.0. I have a feeling this probably broke when I implement the issue where ACSS could mix with CSS, but I've not tested it. So it should really be done. Should check for any other clashes of selectors while I'm at it.

It's a bit like the :focus event. That's also a CSS pseudo-selector, but when used in ACSS it is actually handled as an event. They both end up doing the same action. That sort of thing will be inevitable while ACSS isn't native. Both do the same thing except one is handled as a JS event, CSS is natively quicker, but ACSS is more powerful in context.

This should be a quick fix anyway.

bob2517 commented 2 years ago

Closing this as I don't have a valid use case and the implementation seems impossible due to the action command implications of having an automatic mouseout handling to reverse actions happening in mouseover. I could do a basic add-class/remove-class, but it's not worth implementing if that is all that can be done predictably. It's better off staying as regular CSS.