Set CSS hover properties with events?

0 favourites
  • 5 posts
From the Asset Store
Very simple code without excess options (15 events for server and 11 events for client)
  • For HTML objects like buttons, you can set their normal CSS properties with actions.

    Is there a way to set CSS hover properties with actions?

    e.g. Set a button to have a red boarder when hovering over it.

    It looks to me like it may not be doable with actions, but I wanted to ask. The runtime JavaScript for the button object uses a JQuery function that does not look like it's set up to be able to select the "hover" version of the button.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • AFAIK you can't use the :hover tag, but you can use a mouse "cursor is over" condition to set css styles via the set css style action.

  • Thanks oosyrag,

    That's the workaround I've been using.

    I started looking into the possibility of a hover selector, because setting the colors back to the non-hover state with actions seems to be a little finicky sometimes. There's always the brute force method of every tick set to normal, followed by if hovering set to hover colors. I may try storing the UID of the hovered button and explicitly checking for the end of a hover on the current UID button.

  • Make use of the trigger once and inverted conditions to turn them into triggered events. Avoid using the every tick condition if possible

  • Thanks oosyrag for the suggestions.

    I agree, though, I think "trigger once" is also checked every tick, it's just that it makes a much simpler boolean check, to see if it can reset. If you code your own equivalent trigger-once-style functionality I think it should perform about as well.

    The "trigger once" condition is especially good for cases where you know the True/False frequency of the rest of that event's conditions will always be slower than 2 ticks. The event sheet's Nyquist frequency, so to speak.

    So the case of on-hover is a bit tricky in that respect. If your buttons are really far apart you're probably safe. However, if you have a row of buttons close to each other, you can roll off one button and onto another button, without an intermediate tick where no button was hovered. And that can confuse a "trigger once" based system. It wouldn't if "trigger once" really was a trigger-type condition, but I don't think it is.

    I might be mistaken, but I think adding "trigger once" to an event does not actually make it a triggered event. Relatedly, C2 has both True Triggers and Fake Triggers. In the C2 event sheet they appear identical, including both using the little green arrow icon. The "Fake Triggers" are literally tagged as Fake Triggers in the Javascript of the plugins that employ them. I think the purpose of them is to interact with other conditions in the same way true triggers do (e.g. no stacking) but under the hood, they are still per-tick events.

    As far as I know, true "Triggered events" are implemented as message-subscriber style function calls internally, or something similar. The "On function call" is an example of a true triggered event, as it really doesn't check every tick. In fact, I think "On function call" may be an even more specialized version as the function name may be hashed or something to make it even faster than a normal true "Triggered event".

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)