My structure is pretty basic, here it is:
.container {
height: 100vh;
width: 100%;
pointer-events: none;
}
.click-layer {
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: auto;
}
.box {
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 100px;
background-color: rgba(10, 10, 10, 0.2);
pointer-events: auto;
}
function App() {
return (
<div className="container">
<canvas
className="click-layer"
onClick={() => console.log("Click on Layer 1")}
>
</canvas>
<div className="box" onClick={() => console.log("Click on box")}>
Box
</div>
</div>
);
}
I'm looking to add a hover effect when the user hovers over the box. Specifically, I want the background-color to change to 'red'.
However, click events should be ignored as I want the .click-layer to receive those events instead.
Is there a way to achieve this? Thank you in advance!
Expected outcome
- Hover on the box => background-color changes to red
- Click on the box => The console logs "Click on layer 1"
function App() {
return (
<div className="container">
<canvas
className="click-layer"
onClick={() => console.log("Click on Layer 1")}
>
Layer 1
</canvas>
<div className="box" onClick={() => console.log("Click on box")}>
Box
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));.container {
height: 100vh;
width: 100%;
pointer-events: none;
}
.click-layer {
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: auto;
}
.box {
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 100px;
background-color: rgba(10, 10, 10, 0.2);
pointer-events: auto;
}
.box:hover {
background-color: red;
/* pointer-events: none; */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>