How do I assign CSS custom class on hover?

Ask the community
, ,
1

Question:
How do I assign a CSS custom class within a hover event?

Product:
Wix Studio

What are you trying to achieve:
I am trying to change the z-index of an element on hover, so I have created a custom CSS property and would like to assign it to an element on hover.

If there is a better way to achieve this then I am open to it.

Thank you

2

There are a few ways to accomplish changing a element’s z-index via CSS!

You can either:

  • Target the global class to add a rule that changes the z-index of all elements of a particular type

Learn more about our predefined global classes.

  • Create a custom class via the code panel and add a custom css hover selector

Example

I created a custom class via the code panel and added a custom selector that increases the z-index of any element with the custom class “sentToFront” to 10.

.sendToFront:hover {
    z-index: 10;
}
3

Exactly what I was after, thanks @thomasj!

1 Like
4

How would I achieve this using a click event? I can’t seem to set this i n CSS.

Thank you

5

I’m pretty sure you would have to use velo. Make the class you want to give it, then assign it using onClick() and replace() so you switch the old class to a new one.

1 Like
6

Thanks @simen,

This is very helpful.

I ended up using add( ) as there were no custom classes associated with the element.

For anyone who is interested it would look something like this:

export function element_click(event) {
	$w("#element_click").customClassList.add("CustomClass");
}
1 Like