• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

167
Vistas
how to use hover in objects in react

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;
about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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 />
    </>
  );
}
about 3 years ago · Juan Pablo Isaza Denunciar

0

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.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda