Показать заголовок при вводе мышью - PullRequest
Новая
       7

Показать заголовок при вводе мышью

0 голосов
/ 25 января 2020

Я создаю простой сайт-портфолио.

На целевой странице я показываю изображения разных проектов. Я сопоставляю все проекты {projects.map(({ id, title, route, 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;
  }
`;

1 Ответ

1 голос
/ 25 января 2020

Лучше использовать CSS для этого. Всегда отображайте заголовок, который хотите показать, но по умолчанию скрывайте его в таблице стилей. Используйте псевдо-селектор :hover на изображении, чтобы отобразить заголовок при наведении.

...