How can I change the hover style for inline CSS in a React page?

Question

I changed my css to inline css. while i have to change the button:hover to the inline css, But that is not working. Is there any way to solve this?

<button 
  style={{
    borderRadius: "10px",
    backgroundColor: "#004577",
    color: "#ffffff",
    border: "0px",
    width: "auto",
  }}
  className=" d-flex col-4 justify-content-center  p-2" 
  type="submit">
    Update profile
</button>

I tried but this is not working.

Hi @chandra mayou you could do something like this: https://stackabuse.com/how-to-style-hover-in-react/ — Klian, Jul 27 '23 at 08:18

Felházi Zoli · Answer 1 · 2023-07-27T08:29:11.577

2

You can't. You can watch instead with these 2 props if you hovered or left the element:

<button onMouseEnter={() => {console.log('hovered');}} onMouseLeave={() => {console.log('left');}} />

A similar ticket here

edited Jul 27 '23 at 08:29

answered Jul 27 '23 at 08:22

Felházi Zoli

43
5

But how can i write styles for the hover? – Chandra Mayou Jul 27 '23 at 09:11
@ChandraMayou I have edited Diego's answer. by that you can apply styles on hover – Muhammad Jawad Mansoor Jul 27 '23 at 10:33

score 1 · Accepted Answer · answered Jul 27 '23 at 09:30

Here's my solution.

import React, { useState } from "react";

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

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <button
      style={{
        borderRadius: "10px",
        backgroundColor: isHovered ? "#002744" : "#004577",
        color: "#ffffff",
        border: "0px",
        width: "auto"
      }}
      className="d-flex col-4 justify-content-center p-2"
      type="submit"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      Update profile
    </button>
  );
}

export default App;

score 1 · Answer 3 · answered Jul 27 '23 at 10:52

For changing styles on hover, some modifications in Diego Ammann Answer.

import React, { useState } from "react";

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

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };
const non_hover_style= {
        borderRadius: "10px",
        backgroundColor:  "cyan",
        color: "#ffffff",
        border: "0px",
        width: "auto"
      }

const hover_style= {
        borderRadius: "10px",
        backgroundColor: "red" ,
        color: "#ffffff",
        border: "0px",
        width: "auto"
      }

  return (
    <button
      style={isHovered ? hover_style : non_hover_style }
      className="d-flex col-4 justify-content-center p-2"
      type="submit"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      Update profile
    </button>
  );
}

export default App;

How can I change the hover style for inline CSS in a React page?

3 Answers3