how to use hover in objects in react-CodePudding

I defined a object useStyle and called it in the component SecondTest defined background color, is it possible to add hover in the object useStyle


const useStyle = {
  backgroundColor: "red",
  };

function SecondTest() {
  return <div style={useStyle}>SecondTest go down</div>;
}

export default SecondTest;

CodePudding user response：

You can use Radium React Library

import React from "react";
import Radium from "radium";

const style = {
  color: "#000000",
  ":hover": {
    color: "#ffffff"
  }
};

const MyComponent = () => {
  return <section style={style}>hello world</section>;
};

const MyStyledComponent = Radium(MyComponent);

export default function App() {
  return (
    <>
      <MyStyledComponent />
    </>
  );
}

CodePudding user response：

You can accomplish it with events like onMouseEnter & onMouseLeave if you wish to use javascript to solve your issue. Easier way to do it would be just to give an element className like

<section className='myClass'>hello world</section>

and then just to add desired properties in your .css file which you can import in your component or globally.

.myClass {
  color: #000000;
}

.myClass:hover {
  color: #ffffff;
}

It is not possible to add hover with in-line styles.