Apply custom style when hit a target
Mohamed-Ahmed-Abdullah opened this issue · comments
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" },
},
},
]}
Have you tried using CSS variables and simply updating those on hover?
Check the docs about Dynamic Styles.
See if that works?
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
did you ever figure this out @Mohamed-Ahmed-Abdullah
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, }, }, ]}