我的结构如下。
dbutils.notebook.exit() <Nav>
<Title/>
<DropDown />
</Nav>
是一个类组件，将鼠标悬停在<Nav />上时需要显示Dropdown。
这是<Nav />的代码段。
<Nav />这是export default class HeaderLink extends React.PureComponent {
...
}
的代码段。
<DropDown />这不起作用，但是我发现如果我将const Container = styled.ul`
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all .3s ease-in-out;
${Nav}:hover & {
opacity: 1;
visibility: visible;
transform: translateY(-2px);
}
`;
const DropDown = ({ items }) => (
<Container>
{items.map(({ title, url }) => (
<a href={url}>{title}</a>
))}
</Container>
);
DropDown.propTypes = {
items: PropTypes.array.isRequired
};
export default DropDown;
组件定义为样式组件，那么它将起作用
即<Nav />
但是它不适用于类组件。
对此有何想法？
谢谢。
答案 0 :(得分：1)
您正在尝试使用父级作为选择器，这在CSS中目前是不可能的（请参见：Is there a CSS parent selector?）。您的:hover应该在您的Nav组件上，该组件又将相应的子元素作为目标。
在此处查看示例CodeSandbox：https://codesandbox.io/s/x9lmkply4。