How can a hover be implemented using inline CSS styles in React

Question

With the help of code, can you tell me How can a hover be implemented using inline CSS styles in React?

Answer 1

In React, inline styles do not support pseudo-classes like :hover. To implement hover effects, you can manage the hover state using React's event handlers and update the component's state accordingly. Here's how you can achieve this:

1. Using React State and Event Handlers:

import React, { useState } from 'react';

const HoverComponent = () => {

  const [isHovered, setIsHovered] = useState(false);

  const style = {

    backgroundColor: isHovered ? 'lightblue' : 'lightgray',

    padding: '10px',

    borderRadius: '5px',

    cursor: 'pointer',

  };

  return (

    <div

      style={style}

      onMouseEnter={() => setIsHovered(true)}

      onMouseLeave={() => setIsHovered(false)}

    >

      Hover over me!

    </div>

  );

};

export default HoverComponent;