Question 217093 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
  3. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search