Tailwind中100vh范围内Div的Hover效果失效问题求助

核心问题 #

你的hover效果在初始100vh范围内失效、滚动后恢复，根源在于返回容器的-z-50样式。

原因分析 #

Tailwind的-z-50会给元素设置负的z-index值，这会让整个DisplateDisplay组件容器处于页面其他元素（比如顶部固定导航、视口内的遮罩层或其他定位元素）的下方。当鼠标在初始视口（100vh范围）内时，实际是在覆盖在上方的元素上操作，无法触发下层图片的hover事件；滚动后，那些覆盖元素离开视口，鼠标能直接接触到图片，hover效果就正常了。

解决方案 #

直接移除容器的-z-50类：

return (
  <div className="w-full lg:max-w-[1200px] xl:max-w-[1500px] md:max-w-[900px] sm:max-w-[700px] h-full grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-10 px-auto">
    {content}
  </div>
);

如果你的场景确实需要调整层级，不要用负z-index，改为设置一个合适的正数值（比如z-10），确保容器在其他元素的上层，同时不会影响页面其他组件的层级关系。

内容的提问来源于stack exchange，提问作者Mathew