0

Is it possible to define primary and hover images for an <input type="image"> element in CSS in JS? I'm trying to implement a different image on hover, but can't get the syntax correct.

    margin: 40,
    background: "url(/btn_google_signin_light_normal_web.png)",
    "&:hover": {
      background: "url(/btn_google_signin_light_focus_web.png)"
    }
  }
It'sNotMe
  • 1,184
  • 1
  • 9
  • 29
  • seems like a duplicate of https://stackoverflow.com/questions/10886828/changing-image-on-hover – Max Rohrer Mar 09 '19 at 00:27
  • I reviewed the link you provided. It describes the hover event in CSS. I'm looking to accomplish the same effect in a React project using CSS **in** JS (JSS). – It'sNotMe Mar 09 '19 at 01:53

1 Answers1

0

You can try

IN your CSS

.yourClass {   
    width: 200px;
    height: 200px;
    background: url("images/iamge1.jpg") no-repeat;
    display: inline-block;
}
.yourClass:hover {
    background: url("images/image2.jpg") no-repeat;
}
Sundar Ban
  • 589
  • 5
  • 16
  • Thank you! That works for CSS, but not for CSS in JS (or JSS). In the format you provided, JSS interprets `url()` as a function. – It'sNotMe Mar 09 '19 at 01:49