1

I am trying to implement a hover effect in the react component using react inline-styling.

const InfoWindow: React.FC<IInfoWindowProps> = ({ room }) => {

  const info_window_image = {
    width: "100%",
    height: "168px",
    background: `url(${room.pictures[0].image.large}) no-repeat`,
    backgroundSize: "contain",
    cursor: 'pointer'
  };

  return (
    <div className="info_window_container">
      <div style={info_window_image} />
    </div>
  )
};

div tag under info_window_container gets style object info_window_image .

I can successfully receive an image from API but I want to give zoom-in animation when the user hovers the image in the component.

I gave className to the div and styled in CSS file however it does not work. Styles I declared in CSS file do not render.

How can I make hover or focus effect in react-inline-styling?

GoonGamja
  • 1,936
  • 5
  • 20
  • 46
  • 2
    You can't do `hover` with inline styles. – Sam R. Oct 15 '20 at 07:27
  • 1
    a look like question in [link](https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css). – A.R.SEIF Oct 15 '20 at 07:42
  • Does this answer your question? [How to write a:hover in inline CSS?](https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) – 3dGrabber Aug 30 '21 at 14:54

0 Answers0