css - 在悬停时显示组件框，如下拉菜单和弹出窗口

Question

你好我正在尝试做这样的事情：

基本上我想显示一个图标悬停框

代码：

import React, { useState, useEffect } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSearch,
  faAdjust,
  faUserCircle,
  faAngleDown
} from "@fortawesome/free-solid-svg-icons";
export default function App() {
  const [hover, setHover] = useState(false);

  const updateHover = () => {
    setHover(!hover);
  };

  console.log(hover);
  return (
    <div className="App">
      <span>
        <FontAwesomeIcon
          className="adjust"
          icon={faAngleDown}
          size="lg"
          fixedWidth
          color="black"
          onMouseOver={updateHover}
        />
      </span>
    </div>
  );
}

作为弹出或下拉效果来模拟登录框

标签： cssreactjs

Answer 1

您hover的状态中有布尔值，因此您现在需要做的就是根据值显示或隐藏组件：

  return (
    <div className="App">
      <span>
        <FontAwesomeIcon
          className="adjust"
          icon={faAngleDown}
          size="lg"
          fixedWidth
          color="black"
          onMouseOver={updateHover}
        />
      </span>
      {hover ? <YourOverlayComponent /> : null}
    </div>
  );

显然，您将需要一些 CSS 使其像 gif 示例一样显示在顶部。