2

我知道这与Target another styled component on hover非常相似

但是我想用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;

我希望在悬停按钮时显示链接，但这不起作用，我不知道为什么

4

1 回答 1

2

这里有三个问题。

  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;
于 2019-10-12T04:24:26.437 回答