Material UI 按钮悬停绝对位置不起作用

Question

我有一个 div，里面有一个 button 和另一个 div。 button 通常是隐藏的，里面的 div 有一堆图形和文字。在某些情况下，我想模糊内部 div 并让按钮浮动在模糊部分中间的顶部，有点像你在要求订阅时在媒体或新闻网站上看到的（虽然我删除了示例的逻辑）。我这样做的方式是对按钮使用绝对定位，但是当我这样做时，所有的悬停功能都无法在按钮上正常工作。它不会更改按钮的背景颜色或更改光标我正在使用 material UI 并做出反应。这是一个代码示例 ->

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>

如果有更好、更现代的方法，我会喜欢关于 1) 如何让这个实现工作或 2) 更好的实现而不是使用绝对定位的建议。

Answer 1

有两种解决方法：

在大于 blurred inner div

zIndex

Move 你下面的按钮 blurred inner div

我更喜欢第二种方法，因为你不需要知道其他元素的 zIndex

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>
  );
}

工作示例：codesandbox

顺便说一句，如果您从模糊 class 中删除 filter: "blur(7px)"，那么悬停应该可以正常工作，而无需更改您的代码中的任何内容。我不知道为什么 (-_-)

Material UI 按钮悬停绝对位置不起作用

Material UI Button Hover Not Working Absolute Position

css

reactjs

material-ui