Нацельтесь на другой компонент при наведении курсора, используя emotion-JS - PullRequest
Новая
       45

Нацельтесь на другой компонент при наведении курсора, используя emotion-JS

1 голос
/ 09 октября 2019

Я понимаю, что это очень похоже на Назначение другого стилизованного компонента при наведении

Однако я хотел бы добиться того же эффекта с emotion-JS

Более конкретно яя пытаюсь воссоздать этот пример с использованием компонентов в стиле эмоций

Вот мой код и то, что я пробовал. 

import React from 'react';
import styled from '@emotion/styled';
import { Link } from 'gatsby';

const Dropdown = styled.div`
  postition: relative;
  display: inline-block;
`;

const Button = styled.div`
  background-color: green;
  color: white;
  &:hover {
    ${DropDownContent} {
      display: block;
    }
  }
`;

const DropDownContent = styled.div`
  display: none;
  position: absolute;
`;

const DropDownMenu = () => {
  return (
    <Dropdown>
      <Button>Dropdown</Button>
      <DropDownContent>
        <Link to="/">Link 1</Link>
      </DropDownContent>
    </Dropdown>
  );
};

export default DropDownMenu;

Я бы хотел, чтобы ссылка отображалась при наведении курсора на кнопку, но это не работает, и я не могу понять, почему

1 Ответ

2 голосов
/ 12 октября 2019

Здесь есть три вопроса.

  1. Вы ссылаетесь на DropdownContent до того, как определили его. Переставьте ваш код так, чтобы объявление DropdownContent предшествовало тегам литералов шаблона, которые его используют, и вам было бы хорошо.

  2. Получившийся селектор CSS (что-то вроде button:hover .DropDownContent)не соответствует вашему HTML-документу, где DropDownContent является братом Button.

  3. Ваша собственность position на Dropdown написана с ошибкой.

После устранения всех трех проблем ваш код может выглядеть примерно так:

import React from 'react';
import styled from '@emotion/styled';
import { Link } from 'gatsby';

const Dropdown = styled.div`
  position: relative;
  display: inline-block;
`;

const DropDownContent = styled.div`
  display: none;
  position: absolute;
`;

const Button = styled.div`
  background-color: green;
  color: white;
  &:hover + ${DropDownContent} {
    display: block;
  }
`;

const DropDownMenu = () => {
  return (
    <Dropdown>
      <Button>Dropdown</Button>
      <DropDownContent>
        <Link to="/">Link 1</Link>
      </DropDownContent>
    </Dropdown>
  );
};

export default DropDownMenu;
...