Web Part div change on hover

%3CLINGO-SUB%20id%3D%22lingo-sub-434713%22%20slang%3D%22en-US%22%3EWeb%20Part%20div%20change%20on%20hover%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-434713%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20everyone%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20bear%20with%20me%20as%20I'm%20fairly%20new%20to%20using%20SPFx%20and%20apologise%20in%20advance%20if%20this%20is%20an%20obvious%20question%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20created%20a%20simple%20web%20part%2C%20which%20consists%20of%20a%20single%20div%20displaying%20a%20coloured%20circle.%26nbsp%3B%20A%20user%20can%20configure%20this%20to%20add%20text%20and%20a%20URL%20that%20the%20circle%20will%20link%20to.%26nbsp%3B%20However%2C%20I%20now%20want%20to%20add%20a%20bit%20of%20effect%20to%20the%20circle%20so%20that%20when%20the%20user%20hovers%20their%20mouse%20over%20it%20it%20gets%20slightly%20bigger%20and%20the%20colour%20of%20the%20circle%20changes.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20created%20two%20CSS%20classes%20for%20the%20circle%3B%20one%20'normal'%20and%20one%20for%20when%20the%20user%20hovers%20over%20it.%26nbsp%3B%20However%2C%20I'm%20not%20quite%20sure%20what%20code%20I%20would%20need%20to%20add%20to%20get%20the%20on%20hover%20function%20to%20work%2C%20and%20where%20I%20would%20add%20it.%26nbsp%3B%20I'm%20using%20the%20React%20framework.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'd%20be%20grateful%20for%20any%20pointers%20from%20anyone.%26nbsp%3B%20Thanks%20in%20advance.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-434713%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-446093%22%20slang%3D%22en-US%22%3ERe%3A%20Web%20Part%20div%20change%20on%20hover%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-446093%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F312389%22%20target%3D%22_blank%22%3E%40gjayne84%3C%2FA%3E%26nbsp%3BI'm%20not%20100%25%20sure%20I%20am%20following%2C%20but%20if%20you%20have%20the%20CSS%20classes%2C%20you%20would%20need%20to%20add%20them%20to%20the%20.scss%20file%20for%20your%20solution%20and%20add%20those%20to%20the%20className%20attribute%20on%20your%20React%20Component%20HTML.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi everyone

 

Please bear with me as I'm fairly new to using SPFx and apologise in advance if this is an obvious question :)

 

I have created a simple web part, which consists of a single div displaying a coloured circle.  A user can configure this to add text and a URL that the circle will link to.  However, I now want to add a bit of effect to the circle so that when the user hovers their mouse over it it gets slightly bigger and the colour of the circle changes.

 

I've created two CSS classes for the circle; one 'normal' and one for when the user hovers over it.  However, I'm not quite sure what code I would need to add to get the on hover function to work, and where I would add it.  I'm using the React framework.

 

I'd be grateful for any pointers from anyone.  Thanks in advance.

1 Reply
Highlighted

@gjayne84 I'm not 100% sure I am following, but if you have the CSS classes, you would need to add them to the .scss file for your solution and add those to the className attribute on your React Component HTML.