this my code

CSS

.Navigation-signIn {
  background-color: #c8db5a;
}

.Navigation-signIn։hover {
  background-color: #ffffff;
}

JSX

import { NavLink } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom'

import "./styles.css";

export default function App() {
  return (
    <BrowserRouter>
      <NavLink className={"Navigation-signIn"} to={"/"}>
        <span>{"S"}</span>
        <span>{"ign In"}</span>
      </NavLink>
    </BrowserRouter>
  );
}

CodeSandbox demo

When I want to use ։hover in my code it doesn't work. What is the reason?

CodePudding user response：

The colon you used in your CSS isn't standard. You can see it in the demo, if not here. Compare the one on :hover to the one on the line below.

CodePudding user response：

Did you happen to copy your code from somewhere? When I commented out and wrote it again it works. Additionally, it's better to write your css styling code like the following in the future:

/* a.signIn:link {
  background-color: #c8db5a;
}

a.signIn։hover {
  background-color: black;
} */

a.signIn:link {
  text-decoration: none;
}

a.signIn:hover {
  cursor: pointer;
  color: red;
  background: white;
}

Also using JSX, you don't need {} when you are just writing a text className or context. {} should be used only if you are adding something written in JS or other JSX.

CodePudding user response：

Navlink is an active "a tag" so, this should definitely work: don't forget to remove curly braces in classNames.

a.navigation-signIn:hover {
  .....
}