Problems with CSS hover

Issue

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?

Solution

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.

Answered By – isherwood

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0