Javascript 隐藏文本动画无法正常工作

我想制作一个与此类似的页面：。 当你将鼠标悬停在一个按钮上时，它会向上移动，一些文本会显示为背景

我尝试使用以下代码实现这一点：

$button=document.querySelector（'button'）；
$textcontent=document.querySelector（'.textcontent'）；
如果（$button.hover）{
$textcontent.classList.add（'active'）
}

按钮{
背景色：红色；
边界半径：50%；
宽度：10雷姆；
高度：10雷姆；
}
按钮：悬停{
盒影：0px4rem6rem-2remrgba（0,0,0,0.57）；
-moz盒阴影：0px 2px 40px-10px rgba（0,0,0,0.57）；
转换：translateY（-3.5rem）；
过渡：全部3秒到0秒；
边界：无；
}
.textcontent{
可见性：隐藏；
}
.主动{
能见度：1；
转换：translateY（-3.5rem）；
过渡：全部。背景色：黑色；
颜色：白色
}

一些文本

这里有一个纯CSS和

的解决方案：在

伪元素之后：

div{
位置：相对位置；
宽度：10em；
}
p{
文本对齐：居中；
转换：translateY（4rem）；
}
p:之后{
内容：“；
显示：块；
背景色：红色；
边界半径：50%；
宽度：10雷姆；
高度：10雷姆；
过渡：全部3秒到0秒；
变换：translateY（-5rem）；
}
div:悬停p:之后{
transform:translateY（-12rem）；
}

一些文本

您似乎混淆了javascript和jquery。然而，我不认为

（$button.hover）

在这两种情况下都是有效的条件

button=document.querySelector（'button'）；
textcontent=document.querySelector（'.textcontent'）；
按钮。addEventListener（'mouseover'，handlerIn）
按钮。addEventListener（'mouseout'，handlerOut）
函数handlerIn（）{
textcontent.classList.add（'active'）
}
函数handlerOut（）{
textcontent.classList.remove（'active'）
}

按钮{
背景色：红色；
边界半径：50%；
宽度：10雷姆；
高度：10雷姆；
}
按钮：悬停{
盒影：0px4rem6rem-2remrgba（0,0,0,0.57）；
-moz盒阴影：0px 2px 40px-10px rgba（0,0,0,0.57）；
转换：translateY（-3.5rem）；
过渡：全部3秒到0秒；
边界：无；
}
.textcontent{
不透明度：0；
过渡：不透明度0.2s线性；
}
.主动{
不透明度：1；
}

一些文本

您真的不应该需要Javascript来完成这项工作

我不确定你在寻找什么，但我会在.textContent上使用宽度/不透明度转换（当按钮悬停时），它会获得与你链接的页面非常相似的结果

按钮{
背景色：红色；
边界半径：50%；
边界：无；
宽度：10雷姆；
高度：10雷姆；
过渡：全部3秒到0秒；
}
按钮：悬停{
盒影：0px 3rem 4rem-2rem rgba（0,0,0,0.57）；
-莫兹盒阴影：0px3rem4rem-2remrgba（0,0,0,0.57）；
转换：translateY（-3.5rem）；
过渡：全部3秒到0秒；
边界：无；
}
.textp{
宽度：0px；
不透明度：0；
过渡：不透明度。3s到0s；
}
按钮：悬停+文本内容p{
宽度：200px；
不透明度：1；
过渡：全部3秒到0秒；
}

一些文本

你不需要js，这是一个简单的css方法

<div>
  <button class="hoverbtn" id="hoverbtn">
  </button>
  <div id="textcontent" class = "textcontent">
    <span>some text</span>
  </div>
</div>

如果第二项位于容器旁边（容器关闭标签之后）：

#hoverbtn:hover > #textcontent { opacity : 1 }

#hoverbtn:hover + #textcontent { opacity : 1 }

#hoverbtn:hover #textcontent { opacity : 1 }

#hoverbtn:hover ~ #textcontent { opacity : 1 }

如果第二项在容器内的某个地方：

#hoverbtn:hover > #textcontent { opacity : 1 }

#hoverbtn:hover + #textcontent { opacity : 1 }

#hoverbtn:hover #textcontent { opacity : 1 }

#hoverbtn:hover ~ #textcontent { opacity : 1 }

如果第二项是容器的同级项：

#hoverbtn:hover > #textcontent { opacity : 1 }

#hoverbtn:hover + #textcontent { opacity : 1 }

#hoverbtn:hover #textcontent { opacity : 1 }

#hoverbtn:hover ~ #textcontent { opacity : 1 }

下面是您的css：

.hoverbtn {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

.hoverbtn:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all 0.3s ease 0s;
  border: none;
}

.textcontent {
  opacity: 0;
}

.hoverbtn:hover+.textcontent {
  opacity: 1;
}

参考：