我創(chuàng)建了一個懸停效果，并想把它放入其他組件。我用的是nextjs和tailwindcss。我想在我所有頁面的文本中使用這種懸停效果。

css:

/*Hover Effect*/

.container {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.one,
.two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  color: white;
}

.container:hover .one {
  transform: translateY(-100%);
}

.container:hover .two {
  transform: translateY(0);
  color: dimgray;
}

.two {
  transform: translateY(100%);
}

其組成如下。這一頁上的所有文本以及我的其他頁面內(nèi)容應(yīng)該懸停。有沒有辦法保持這種h over風(fēng)格，這樣我就可以把它應(yīng)用到任何元素上，只需要給它一個值什么的？

<nav>
        <div>
          <Image />
          <a>Logo</a>
        </div>
        <div>
          <ul>
            <li>
              <a>Home</a>
            </li>
            <li>
              <a>Work</a>
            </li>
            <li>
              <a>About</a>
            </li>
            <li>
              <a>Contact</a>
            </li>
          </ul>
        </div>
      </nav>

我嘗試用樣式化的組件來做這件事。但是對我沒用。

import React from 'react';
import styled, { css } from 'styled-components';

const hoverEffect = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  color: white;

  .container:hover & {
    transform: translateY(-100%);
  }

  .container:hover ~ & {
    transform: translateY(0);
    color: dimgray;
  }

  .container ~ & {
    transform: translateY(100%);
  }
`;

const StyledOne = styled.a`
  ${hoverEffect}
`;

const StyledTwo = styled.a`
  ${hoverEffect}
`;

const Container = styled.div`
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
`;

const App = () => {
  return (
    <Container>
      <StyledOne className="p-10 text-center text-2xl">Work</StyledOne>
      <StyledTwo className="p-10 text-center text-2xl">Work</StyledTwo>
    </Container>
  );
};

export default App;