样式化组件下拉菜单使父级：悬停颜色保持在子级：悬停答案

【问题标题】：styled-component dropdown make parent:hover color stay while child:hover样式化组件下拉菜单使父级：悬停颜色保持在子级：悬停
【发布时间】：2020-07-10 07:27:57
【问题描述】：

我试图让父背景颜色在悬停时保持更改，因为我继续将鼠标悬停在下拉项目上。

https://zqy0v.csb.app/dropdowns

import React from "react";
import styled from "styled-components";

//============================================ styles =============================================
const DivDropdownContent = styled.div`
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 24.7rem;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
`;

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

  &:hover ${DivDropdownContent} {
    display: block;
  }
`;

const SpanDropdownTitle = styled.div`
  font-size: 1.6rem;
  font-weight: bold;
  padding: 2rem 6rem;
  border-radius: 0.6rem;
  border: 1px solid black;

  &:hover {
    cursor: pointer;
  }
`;

const ItemDropdown = styled.p`
  padding: 1rem;

  &:hover {
    cursor: pointer;
    background: lightgray;
  }
`;

//=========================================== component ===========================================
const BasicDropdown = props => {
  return (
    <DivDropdown>
      <SpanDropdownTitle>Basic&nbsp;Dropdown</SpanDropdownTitle>
      <DivDropdownContent>
        <ItemDropdown>Item 1</ItemDropdown>
        <ItemDropdown>Item 2</ItemDropdown>
        <ItemDropdown>Item 3</ItemDropdown>
      </DivDropdownContent>
    </DivDropdown>
  );
};

export default BasicDropdown;

基本上，我希望在将鼠标悬停在下拉菜单中的子项上时，父项的背景颜色保持不变，就像在这里完成的 https://woocommerce.com/

有没有一种简单的方法可以做到这一点，还是我必须开始使用 state 和 onPointerEnter 和 onPointerLeave 变得复杂？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

我终于找到了解决办法，有点尴尬。

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

  &:hover ${DivDropdownContent} {
    display: block;
  }
`;

问题： ^当我将背景封面添加到悬停时，这只是针对嵌套组件。

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

  &:hover {
    background: lightgray;
  }

  &:hover ${DivDropdownContent} {
    display: block;
  }
`;

修复： ^通过添加上述内容，我能够纠正该行为。

我将保留这个问题，因为我无法通过互联网搜索找到很多关于此的教程。我认为这是一个相当干净的解决方案，并认为它会帮助其他人搜索。

【讨论】：