выпадающий список стилевых компонентов сделать родителя: цвет при наведении, а потом дочерний: при наведении

Question

Я пытаюсь сделать так, чтобы родительский цвет фона оставался измененным при наведении, пока я продолжаю парить над выпадающими элементами.

https://zqy0v.csb.app/dropdowns <выпадающий список </p>

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/

Есть ли простой способ сделать это, или я должен начать усложняться с использованием состояний и onPointerEnter и onPointerLeave?

Answer 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;
  }
`;

Исправление: ^ Добавив выше, я смог исправить поведение.

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