Target another component on hover using emotion-js

Question

I understand this is very similar to Target another styled component on hover

However I would like to achieve the same effect with emotion-js

More specifically I am trying to recreate this example using emotion styled components

Here is my code and what I have tried.

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;

I would like the link to show up when I hover the button, but that is not working and I cannot figure out why

score 4 · Answer 1 · answered Oct 12 '19 at 04:24

There are three issues here.

You're referencing DropdownContent before you've defined it. Rearrange your code so that the DropdownContent declaration comes before the tagged template literals that use it and you should be good to go.
The resulting css selector (something like button:hover .DropDownContent) does not match your HTML document, where DropDownContent is a sibling of Button.
Your position property on Dropdown is misspelled.

With all three issues resolved, your code may look something like this:

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;

Getting rid of the pseudo selector + worked for me and changing my markdown to wrap the Button around the DropDownContent. I think this makes sense because we want the DropDownContent style to change when hovering over the button and the links — Theorder, Oct 20 '19 at 08:12

score 0 · Answer 2 · answered Jun 11 '22 at 21:03

as @coreyward mentioned, rearrange the code.... and the

import styled from "@emotion/styled/macro";

and this will do the trick

This solution was already posted at Component selectors can only be used in conjunction with babel-plugin-emotion error while using emotion by https://stackoverflow.com/users/165215/ijk

Target another component on hover using emotion-js

2 Answers2