CODEWITHSUNDEEP
javascriptcssreactjshover
Yuval
Yuval

Reputation: 1232

How to capture onhover of a element overlapping a button?

I'm using react and I'm trying to create a footer element, that displays some information on one side of the screen. When the footer is hovered I want it to move to the other side of the screen in order for whats behind it to be visible.

A good example of this is the loading footer of chrome. when you move the mouse over it, it moves to the right side (and when you move out of it, it returns to the left again).

enter image description here

I'm currently struggling to make it so the footer ishover events are working and at the same time whats behind it is still clickable. The problem occurs because if the footer has pointerEvent: "none" the hover event doesn't work, and if the footer doesn't have pointerEvent: "none" then a button behind it isn't clickable...

enter image description here

I've created a minimal codesandbox to recreate the problem.

Thanks a lot in advance :)

Upvotes: 0

Views: 361

Answers (1)

Konrad
Konrad

Reputation: 163

Sooo, I did it like this:

import React, { useState } from "react";

export default function App() {
onst [isMaskHoverd, setIsMaskHoverd] = useState(false);

return (
<div className="App">
  <div
    onMouseOver={() => setIsMaskHoverd(true)}
    onMouseOut={() => setIsMaskHoverd(false)}
    className={isMaskHoverd ? "footer footer__hover" : "footer"}
  >
    Footer
  </div>
  {/* It is clickable now :) */}
  <button className="btn" onClick={() => alert("clicked!")}>
    Click me
  </button>
  <p className="">masked hovered: {isMaskHoverd ? "true" : "false"} </p>
 </div>
 );
 }

and in styles.css I made those classes:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
 background-color: black;
}

.App {
 position: relative;
 height: 100vh;
 }

.btn {
   position: absolute;
   bottom: 0;
   padding: 20px;
 }

 .footer {
   background-color: white;
   padding: 20px;
   text-align: center;
   width: 50%;
   position: absolute;
   bottom: 0;
   z-index: 2;
  }

 .footer__hover {
   right: 0;
  }

So now when u mouse over your footer as I called it(I couldnt stand those "asasas" things xD) class footer__hover is apllied and it changes its position to the right side and when you move out the mouse than only class footer with basic styling is applied so it's going back to the left: 0 position and covering the button :D

Upvotes: 1

Related Questions