React

HTML

<div id="app"></div>

CSS

.container {
  position: relative;
  max-width: fit-content;
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(122, 122, 122, 0.2);
}

.block {
  border: 1px dashed blue;
  height: 100px;
}

React

const Selector = ({children}) => {
    const [isHovered, setIsHovered] = React.useState(false);

    const mouseOverHandler = (ev) => {
        ev.stopPropagation();
        setIsHovered(true);
    }

    const mouseOutHandler = (ev) => {
        ev.stopPropagation();
        setIsHovered(false);
    }

    return (
        <div className="container" onMouseOver={mouseOverHandler} onMouseOut={mouseOutHandler}>
            {children}
            { isHovered && <div className="overlay"></div> }
        </div>
    );
}

const Input = ({style}) => {
	return <input style={style} />
}

const Block = ({style}) => {
    return <div className="block" style={style}></div>
}

const App = () => {
    return (
         <div className="workspace">
              <Selector><Input style={{width: "100%"}} /></Selector>
              <Selector><Block style={{width: "100px"}} /></Selector>
              <Selector><Block style={{width: "100%"}} /></Selector>
         </div>
    );
}

ReactDOM.render(<App />, document.querySelector("#app"))