Javascript 仅当鼠标按在按钮上时显示div

我想要一个带有文本的div，该文本仅在鼠标指针设置在特定按钮上时显示

这是我的代码：

//帮助文本
$（“#帮助容器”）
.鼠标悬停（功能（e）{
$（this.find（“#帮助文本”）.fadeIn（100）.width（“80%”）；
})
.mouseleave（功能（e）{
$（this.find（“#帮助文本”）.fadeOut（100）.width（“0%”）；
});
#帮助容器{
背景色：红色；
位置：绝对位置；
顶部：0px；
左：0px；
}
#帮助容器#帮助btn{
填充：10px；
框大小：边框框；
显示：内联块；
背景颜色：绿色；
浮动：左；
}
#帮助容器#帮助文本{
宽度：0；
显示：无；
}

帮助
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。
尝试宽度（0%）而不是宽度（80%）

为我工作。希望它能起作用。祝你度过愉快的一天。
在hover上显示和隐藏div不需要javascript。您可以使用速度更快的纯CSS来完成

我在下面添加了CSS，可以在另一个div的悬停上显示和隐藏div：

#help-container #help-btn:hover ~ #help-text{
  display: block;
}

请参阅以下代码段：


#帮助容器{
背景色：红色；
位置：绝对位置；
顶部：0px；
左：0px；
}
#帮助容器#帮助btn{
填充：10px；
框大小：边框框；
显示：内联块；
背景颜色：绿色；
浮动：左；
过渡：均为0.3秒；
-webkit转换：所有0.3；
}
#帮助容器#帮助文本容器{
宽度：0%；
显示：无；
溢出：隐藏；
高度：75px；
}
#帮助容器#帮助btn:hover~#帮助文本容器{
显示：块；
动画：宽度动画0.5s正常线性向前；
}
@关键帧宽度动画{
从{宽度：0%}
到{宽度：80%；}
}

帮助
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。
假设将鼠标从帮助块（绿色）移动到部分（红色）中时希望保持同一元素处于打开状态

简化它，使元素的宽度为100%，而不是缩放到0%，只需使用fadeIn和fadeOut，
display:none
取代
width:0
，因为隐藏元素上没有宽度。它的工作原理和你的一样，但没有触发循环


$（“帮助容器”）
.鼠标悬停（功能（e）{
$（this.find（“#帮助文本”）.fadeIn（100）；
})
.mouseleave（功能（e）{
$（this.find（“#帮助文本”）.fadeOut（100）；
});
#帮助容器{
背景色：红色；
位置：绝对位置；
顶部：0px；
左：0px；
}
#帮助容器#帮助btn{
填充：10px；
框大小：边框框；
显示：内联块；
背景颜色：绿色；
浮动：左；
}
#帮助容器#帮助文本{
宽度：100%；
显示：无；
}

帮助
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。
您不想使用工具提示的原因是什么？当您将鼠标悬停在按钮上时，将显示文本。谢谢您的回答！你能帮我把宽度的过渡弄平滑吗？@O'Niel我已经更新了答案。。添加了动画。请看一看