Given JSX

import "./styles.css";

export default function App() {
  return (
    <div >
      <div ></div>
    </div>
  );
}

and CSS

.parent{
  position:relative;
  background-color:blue;
  width:100%;
  height:20px;
 
}
.parent:hover{
  background-color:red;
}

.child{
  position:absolute;
  height:50px;
  border: 2px solid steelblue;
  
}
.child:hover{
  border: 2px solid green;
}

See

CodePudding user response：

Try this:

.child::after {
  display: block;
  position: absolute;
  content: '';
  width: 5px; // Give more size if you need
  height: 100%;
  //background-color: green; // Use this only to debug
}

This add a non visible rectangle that affect to your hover. You can also use left and top if you need move the rectangle.