CODEWITHSUNDEEP
javascripthtmlcssreactjs
Tan Dat
Tan Dat

Reputation: 3117

Display hover effect but ignore click event?

I have a basic structure like this

.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 would like to have a hover effect when the user hovers over the box. For example, the background-color should change to 'red'.

But click events will be ignored since I want the .click-layer to receive those events.

Is there any way I could implement this? Thanks in advance!

Expected behavior

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>

Upvotes: 3

Views: 665

Answers (1)

Subrato Pattanaik
Subrato Pattanaik

Reputation: 6059

Instead of giving the onClick event to your .click-layer and .box, you can give it to the whole .container class. If you select any one of them, it will console it out. I hope that this is what you expected🤞.

<div className="container" onClick={() => console.log("Click on Container")}>
  <div className="click-layer">Layer 1 </div>
  <div className="box">
    Box
  </div>
</div>


function App() {
  return (
    <div className="container" onClick={() => console.log("Click on Container")}>
      <div className="click-layer">Layer 1 </div>
      <div className="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>

Upvotes: 1

Related Questions