javascript - 鼠标输入时显示标题

Question

我正在构建一个简单的作品集网站。

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

(因为 displayTitle 设置为 true {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;
  }
`;

Answer 1

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