reactjs - 如何使按钮在 ReactJS 中鼠标悬停在图像上

Question

我在使用 Bootstrap 的 ReactJS 中有一个图片库。我想添加按钮来删除或进一步修改图像。当鼠标悬停在相应图像上时，这些按钮应该只出现在图像的一角。 我一直在广泛地寻找，要么我只是不知道关于这叫做什么的正确术语，要么它并不像我想象的那么普遍。 当然，如果已经回答了同样的问题，我会非常感激被指出上述问题。

Answer 1

您可能会从以下内容开始(基于一张图片):

import React, { useState } from "react";
import { Image, Button } from "react-bootstrap";

const ImageExample = () => {
  const [isHovered, setHover] = useState(false);

  return (
    <div
      className="imageContainer"
      onMouseOver={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <Image src="https://via.placeholder.com/150"/>
      {isHovered && (
        <Button
          size="sm"
          style={{
            position: "absolute",
            top: "5px",
            right: "5px",
          }}
          variant="primary"
        >
          Show on hover
        </Button>
      )}
    </div>
  );
};

export default ImageExample;

.imageContainer {
  max-width: 150px;
  max-height: 150px;
  position: relative;
}

沙盒:https://codesandbox.io/s/zen-wilbur-qugei