Expand clickable region of thin div

Issue

Given JSX

import "./styles.css";

export default function App() {
  return (
    <div class="parent">
      <div class="child"></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 codesandbox

Is there a way to enlarge the clickable region of child div (in orange rectangle portion) without changing the look of div (expanded region needs to be in transparent)? Now it's too small to click.

Solution

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.

Answered By - Victor