Javascript 在鼠标输入时显示标题

我正在建立一个简单的投资组合网站。

在登录页上，我显示了不同项目的图像。 我正在绘制所有项目的地图

{projects.map（{id，title，route，src}，index）=>（））}

我想要的是当鼠标进入图像时，在图像下方显示项目名称。 当您输入图像时，它会显示所有图像下方的所有名称

（因为

displayTitle

设置为true

{displayTitle？title:null}

）

在MouseCenter上，它应该只显示悬停图像的标题

关于如何解决这个问题，有什么建议或创造性的解决方案吗

这是整个组件的

export const Main = () => {
  const [projects, projectsSet] = useState([]);
  const [displayTitle, setDisplayTitle] = useState(false);

  useEffect(() => {
    const projects = projectsLoader();
    projectsSet(projects);
  }, []);


  return (
    <>
      <NavWrapper>
        {projects.map(({ id, title, route, src }, index) => (
          <ImageWrapper id={id} key={id}>
            <NavLink
              activeClassName="active"
              className="Nav_link"
              exact={true}
              to={`/${route}`}
            >
              <div
                onMouseEnter={() => {
                    setDisplayTitle(true);
                }}
                onMouseLeave={() => setDisplayTitle(false)}
                style={flexStyle}
              >
                <ProjectImage src={src} alt={title} />
                {displayTitle ? title : null}
              </div>
            </NavLink>
          </ImageWrapper>
        ))}
      </NavWrapper>
    </>
  );
};

但这也有同样的效果，这是可以理解的

解决方案

我使用的是样式化组件

 export const ProjectWrapper = styled.div`
  position: relative;
`;

export const ProjectImage = styled.img`
  max-width: 15rem;
  max-height: 15rem;
  margin: 3rem;
`;

export const Title = styled.div`
  display: none;
  ${ProjectWrapper}:hover & {
    display: block;
  }
`;

---

最好使用CSS来实现这一点。始终呈现要显示的标题，但默认情况下将其隐藏在样式表中。使用图像上的

：hover

伪选择器在hover上显示标题。

有时尝试巧妙的解决方案是行不通的。谢谢，我找到了一个简单的解决办法。

 export const ProjectWrapper = styled.div`
  position: relative;
`;

export const ProjectImage = styled.img`
  max-width: 15rem;
  max-height: 15rem;
  margin: 3rem;
`;

export const Title = styled.div`
  display: none;
  ${ProjectWrapper}:hover & {
    display: block;
  }
`;