마우스를 올리면 표시되는 콘텐츠가 포함된 블록이 있습니다. 효과가 작동하는 방식은 다음과 같습니다:
.hoverCard
기본 콘텐츠는 기본적으로 표시됩니다(.hoverCard__showOnHover의 콘텐츠는 숨겨짐)
사용자가 .hoverCard 위로 마우스를 가져가면 .hoverCard__showOnHover
显示其内容,并且 .hoverCard__body
위로 전환됩니다("개방" 효과 제공) 내가 겪은 문제는 다음과 같습니다.
visibility:hidden
、opacity:0
和 height:0
仍然为 .hoverCard__showOnHover
保留空间。这意味着,如果默认情况下,.hoverCard__body
的底部填充量为 40px,而 .hoverCard__showOnHover
를 사용하면 사용자가 140px 공간을 보기 위해 .hoverCard 위로 마우스를 가져갈 필요가 없습니다GSAP
逐渐赋予 .hoverCard__showOnHover
높이를 사용해 보았습니다. 하지만 여전히 위의 문제가 있으므로 운이 좋지 않습니다 이 문제를 해결할 방법이 있나요? 반드시 GSAP를 사용하는 것은 아니며, 위의 문제를 해결하기 위해 GSAP를 사용해 보았습니다.
으아아아 으아아아 으아아아
카드의 기본 버전이 시각적으로 어떻게 보이는지(오른쪽 카드)와 마우스 오버 상호작용이 어떻게 작동하는지(왼쪽 카드)는 다음과 같습니다.
카드 높이는 증가하지 않았습니다. 대신 본문이 카드 내에서 위로 이동하여 내용이 표시됩니다.
Kooilnc의 답변에 따르면:
으아아아 으아아아
또한 max-height: 100px;
에 대한 숫자를 정의해야 하나요? 콘텐츠 크기를 알 수 없고 동적이어야 하는 경우에는 어떻게 되나요?
최신 방법:
으아아아 으아아아
위 내용:
.hoverCard__body
上方出现不必要的空格(应仅填充顶部 30px
)입니다. P粉7606754522024-03-28 11:47:55
요령은 표시할 텍스트를 max-height: 0
和 overflow: hide
로 설정하는 것입니다. 이것은 최소 재현 가능한 예입니다.