在鼠标输入时显示标题答案

【问题标题】：Show title on mouse enter在鼠标输入时显示标题
【发布时间】：2020-05-11 15:26:13
【问题描述】：

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

在登陆页面上，我展示了不同项目的图片。我正在映射所有项目 {projects.map(({ id, title, route, src }, index) => ())} 我想要的是当鼠标进入图像时在图像下方显示项目名称。在您输入图像的那一刻，它会显示所有图像下方的所有名称。

（因为displayTitle 设置为真{displayTitle ? title : null}）

OnmouseEnter 它应该只显示悬停的图像其标题。

关于如何解决此问题的任何建议或创造性解决方案？

这是整个组件

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

我也为 OnMouseEnter 试过这个

                  if (index + 1 === id && document.getElementById(id).id) {
                    if (title.toLowerCase().replace(/\s/g, "") === route) {
                      setDisplayTitle(true);
                    }
                  }
                }}

但可以理解的是，这具有相同的效果。

解决方案

我正在使用样式化组件

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

【问题讨论】：

标签： javascript reactjs react-hooks styled-components

【解决方案1】：

最好使用 CSS。始终呈现要显示的标题，但默认情况下将其隐藏在样式表中。使用图像上的:hover 伪选择器在悬停时显示标题。

【讨论】：

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