I have a div with a button and another div in it. The button is normally hidden and the inner div has a bunch of graphs and text. In certain circumstances, I want to blur the inner div and have the button float on top in the middle of the blurred out section, kind of like you see on medium or news sites when asking for subscriptions (although I removed the logic for the example). The way I'm doing it is using absolute positioning for the button, but when I do that, all of the hover functionality just flat out isn't working on the button. It doesn't change the background color of the button or change the cursorI'm using material UI and react. Here is a code sample ->

const useStyles = makeStyles((theme) => ({
    blur: {
        filter: "blur(7px)",
    },
    relativePos: {
        position: "relative",
    },
    absolutePos: {
        position: "absolute",
        top: "50%",
        left: "50%",
    },
    floatingBtn: {
        "&:hover": {
            cursor: "pointer",
            backgroundColor: "red",
        },
    },
});

// some other stuff

<div className={classes.relativePos}>
    <Button
        variant="contained"
        color="primary"
        className={`${classes.absolutePos} ${classes.floatingBtn}`}
    >
    Button Text
    </Button>
    <div className={classes.blur}>
        {/* Blurred Inner Div Stuff */}
    </div>
</div>

I'd love suggestions on either 1) how to get this implementation working OR 2) a better implementation NOT using absolute positioning, if there's a better, more modern approach.

CodePudding user response：

There are two solutions:

1. use zIndex on the button that is greater than the blurred inner div
2. Move the button under your blurred inner div

I would prefer the 2nd approach as you don't need to know the zIndex of other elements

const useStyles = makeStyles((theme) => ({
  blur: {
    filter: "blur(7px)"
  },
  relativePos: {
    position: "relative"
  },
  absolutePos: {
    position: "absolute",
    top: "50%",
    left: "50%"
    // zIndex: 1000  <- Add The zIndex here if you want 1st approach
  },
  floatingBtn: {
    "&:hover": {
      cursor: "pointer",
      backgroundColor: "red"
    }
  },
  // This is temp button to just toggle the absolute button
  tempButton: { margin: "30px 0" }
}));

export default function App() {
  const classes = useStyles();
  const [showButton, setShowButton] = useState(false);

  return (
    <div className={classes.relativePos}>

      {/* Your graphs area */}
      <div className={classes.blur}>This is graphs area</div>

      {/* Your absolute button with hover effect */}
      {/* you can add it at the bottom and then no need to use zIndex */}
      {showButton && (
        <button className={`${classes.absolutePos} ${classes.floatingBtn}`}>
          Button
        </button>
      )}

      {/* Temp button to show/hide the absolute button, you should have ur own logic */}
      <button
        className={classes.tempButton}
        onClick={() => setShowButton(!showButton)}
      >
        Click me to show/Hide the button
      </button>
    </div>
  );
}

working example: codesandbox

BTW If you remove filter: "blur(7px)" from the blur class then the hover should work without changing anything in your code. I have no idea why (-_-)