Target another styled component on hover not working-CodePudding

I need help with hover in styled components. If hover is in component and affect that component, that work. But if hover is in component and affect another component, not working.

DropDownContent not show on DropDownLi:hover.

export const DropDownLi = styled(StyledLi)`
  display: inline-block;

  &:hover {
    color: red;
  }
`;

export const DropDownContent = styled.div`
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;

  ${DropDownLi}:hover & {
    display: block;
  } 
  /* not show on hover */
`;

Not working in next example.

export const DropDownLi = styled(StyledLi)`
  display: inline-block;

  &:hover ${DropDownContent} {
    color: red;
  }
`;

<StyledUl>
  <DropDownLi>$ Currency</DropDownLi> 
  <DropDownContent>dvsdv</DropDownContent>
  <DropDownLi>English</DropDownLi>
  <StyledLi>Login</StyledLi>
</StyledUl>

CodePudding user response：

Try to remove &:

export const DropDownContent = styled.div`
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;

  ${DropDownLi}:hover {
    display: block;
  } 
  /* not show on hover */
`;

CodePudding user response：

I found a solution for this problem. The code that works is below.

<StyledUl>
  <DropDownLi>
    $ Currency
    <DropDownContent>dvsdv</DropDownContent>
  </DropDownLi>
</StyledUl>

export const StyledLi = styled.li`
  float: left;
  cursor: pointer;
`;

export const DropDownContent = styled.div`
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
`;
export const DropDownLi = styled(StyledLi)`
  display: inline-block;
`;

export const StyledUl = styled.ul`
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  color: black;

  ${DropDownLi}:hover > ${DropDownContent} {
    display: block;
  }
`;