a:focus not working well in a Reactjs Component-CodePudding

I have all my <a> tags with :focus, :hover and :active styled like this:

a:hover,
a:active,
a:focus {
 background: rgba(225, 225, 225, 0.35) !important;
}

But the problem is, they don't work. I have to click like 2 times to see the background color For example, on this menu

<div className="appBottomMenu">
      <Link to="/" className="item">
        <div className="col">
          <i className="fi fi-rr-home"></i>
        </div>
      </Link>
      <Link className="item" to="/area">
        <div className="col">
          <i className="fi fi-rr-marker"></i>
        </div>
      </Link>
      <Link to="/community" className="item">
        <div className="col">
          <i className="fi fi-rr-browser"></i>
        </div>
      </Link>
      <Link to="/shop" className="item">
        <div className="col">
          <i className="fi fi-rr-shopping-cart"></i>
        </div>
      </Link>
      <Link to="/profile" className="item">
        <div className="col">
          <i className="fi fi-rr-user"></i>
        </div>
      </Link>
    </div>

How can I make :focus, :hover and :active wor on te first click?

CodePudding user response：

Bellow code is working for me:

const {Link} = ReactRouterDOM


const Example = () => {
  return(
  <ReactRouterDOM.HashRouter>
    <Link to = "/example">Example</Link> 
  </ReactRouterDOM.HashRouter>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Example/>);

a:hover,
a:active,
a:focus {
  background: rgba(199, 18, 18, 0.35) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
<div id="root"></div>

CodePudding user response：

I think you need to use ref element for this About ref: https://reactjs.org/docs/refs-and-the-dom.html

Same answer/question: How to focus a react-router Link