Apply custom style when hit a target

[Mohamed-Ahmed-Abdullah]

Hi,

Is there is a way to apply a certain style to the outer when it hit a clickable? for example I want it to be green without border normally but when it's over a link it should have border with no fill and it scale as well. I hope the border animation still work as well.

I tried to use the clickables option with target. This is a simple try to change the color to red when it's over a link, but it doesn't work, not sure what am I missing. I tried to use color and outerStyle both didn't work.

Can you help please.

  <AnimatedCursor
        color="0, 233, 0"
        innerSize={0}
        outerSize={30}
        outerScale={2}
        trailingSpeed={9}
        showSystemCursor={true}
        clickables={[
          "a",
          'input[type="text"]',
          'input[type="email"]',
          'input[type="number"]',
          'input[type="submit"]',
          'input[type="image"]',
          "label[for]",
          "select",
          "textarea",
          "button",
          ".link",
          {
            target: ".custom",
            options: {
              //color: "233, 0, 0",
              outerStyle: { backgroundColor: "red" },
            },
          },
        ]}

[stephenscaff]

Have you tried using CSS variables and simply updating those on hover? Check the docs about Dynamic Styles.

See if that works?

[Mohamed-Ahmed-Abdullah]

Hi Stephen Scaff,

Those Styles are nice but they don't allow me to specify a style for the "outer" when it's hovering over an a tag.

Can't seem to figure out how to use them to do that, I prepared this may you please help https://codesandbox.io/s/eloquent-brook-35lvlh?file=/src/index.tsx

[krozzi]

did you ever figure this out @Mohamed-Ahmed-Abdullah

[Ozneeee]

Here is your solution @Mohamed-Ahmed-Abdullah & @krozzi .

First remove your clickable object and add this one :

clickables={[ { target: ".YOUR ELEMENT CLASS HERE", innerStyle: { background: "#763590", // purple first dot }, outerStyle: { background: "#1E8E20", //green second dot }, options: { // add size innerSize: 30, outerSize: 40, }, }, ]}