[TIL] 230913

Tailwind

마우스 hover시 뒷배경이 어두워지면서 버튼이 나타나게 만들기

상위 부분에 group 을 선언해두고 보여지고 싶은 부분에 invisible group-hover:visible를 선언해주면 마우스를 hover할 시 버튼이 나타난다.

<Card
      className="group mx-2 sm:mx-0 w-max-[140px] sm:w-max-[210px] w-[140px] sm:w-[240px]"
      hoverable
      size="small"
      onClick={(e) => onClickHandler(e)}
      cover={
        <img
          className="h-[210px] sm:h-[360px]"
          alt="example"
          src={`https://image.tmdb.org/t/p/w780${movie.poster_path}`}
        />
      }
    >
      <div className="invisible group-hover:visible bg-gray-600 bg-opacity-50 flex-wrap absolute rounded-xl items-center justify-center top-0 sm:left-0 mx-2 h-[210px] sm:h-[360px] sm:mx-0 sm:w-max-[210px] w-[140px] sm:w-[240px]">
        <div className="w-full px-[30px] items-center absolute sm:bottom-10 justify-center gap-[10px]">
          <AddIgnoreMovieButton movieid={movie.id} />
          <AlreadyWatchedButton movieId={movie.id} title={movie.title} />
        </div>
      </div>
  .
  .
  </Card>

이벤트 버블링 방지

e.stopPropagation();로 이벤트 버블링을 방지할 수 있다.

const handleMenuClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    e.stopPropagation();
  };