Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zizther

How to select a pseudo of this for CSSRulePlugin.getRule

Recommended Posts

I have multiple buttons with the same class on a page. I have a mouseover event on the buttons and I want to update the :before pseudo on the current button.

 

How would I pass in the current button so that not all buttons would update if i were to use the CSS class attached to all buttons?
Is it possible to use `this` at all or would I have to apply a unique class to each button or something?

Link to post
Share on other sites

Hello zizther and welcome to the forums!

 

53 minutes ago, zizther said:

How would I pass in the current button so that not all buttons would update if i were to use the CSS class attached to all buttons?

The only way to do this would be to edit or create a new CSS rule that applies to that specific button since you're affecting a pseudo-element. 

 

53 minutes ago, zizther said:

Is it possible to use `this` at all

No, this is in JavaScript. It doesn't (and can't) exist in CSS. 

 

53 minutes ago, zizther said:

would I have to apply a unique class to each button or something?

Yes, you would have to do something along these lines. For example you could apply a unique class or ID to each button and then affect that specific style rule (using GSAP's CSSRulePlugin would make it slightly easier). If you use a CSS pre-processor like SCSS you could make generating the style rules for individual buttons easier. 

 

The easiest solution would be to replace the psuedo-elements with real elements instead :) Then you can access them in JS and this isn't an issue.

  • Like 1
Link to post
Share on other sites

Thanks @ZachSaucier
At the moment I have an element within the button which is being controlled via the JS, i was just wondering if i could clean that up by using the pseudo and controlling it via GSAP.
Seems like it will be easier to keep it the way I have it now.

Thanks

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×