0

Hi I have used office fabric ui document card i want to change colour on hover of document card , enter image description here enter image description here

                const cardStyles: IDocumentCardStyles  = {
                  root: [
                    {
                      display: 'inline-block', marginRight: 20, borderRadius: 25,  marginBottom: 20,width: 200, 
                backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'none',textAlign: "center" ,color:"white",
                      selectors: {
                        ':hover': {
                          backgroundColor:'brown'
                        },

                      }
                    }
                  ]
                };

                const Documentcardstyle = {
                  root: [
                    {
                      textAlign: "center" , borderRadius: 25,outline:'none',borderColor:'none',

                    }
                  ]
                };

                return(

                    <DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.GPDTemplate)}>
                    <DocumentCardTitle styles={Documentcardstyle} title={items.GPDTemplate} />
                    <DocumentCardImage  styles={Documentcardstyle} height={100}imageFit={ImageFit.cover}  imageSrc={items.GPDImageLink ? items.GPDImageLink["Url"] : ''} />
                    <DocumentCardDetails>
                    </DocumentCardDetails>
                    </DocumentCard>

                    );
2

You can create a CSS class in your WebPartName.module.scss file in your web-part project like:

/* Default background color for Document Card */
.documentCardStyle {
    background-color: green !important;
}

/* Background color for Document Card on Hover */
.documentCardStyle:hover {
    background-color: yellow !important;
}

Then use this class in your code file like:

<DocumentCard className={styles.documentCardStyle} onClick={() =>this.ShowGrid(items.Template)}>
  • hi i tried it and it worked but , but if i hover it keep on changing – kumar Sep 12 '19 at 9:06
  • I didn't get you. What do you mean by it keep on changing? – Ganesh Sanap Sep 12 '19 at 9:17
  • means half part get change and other part goes blank – kumar Sep 12 '19 at 9:33
  • second component have image in it – kumar Sep 12 '19 at 9:34
  • have updated the code and image in question – kumar Sep 12 '19 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.