悬停显示说明（CSS或Javascript）

我试图复制上看到的悬停显示的描述

通过练习这个例子，我有点接近了：

@导入url(https://fonts.googleapis.com/css?family=Ubuntu);
a、 盒子{
颜色：#fff；
背景色：#2f9b9b；
显示：块；
宽度：400px；
高度：250px；
溢出：隐藏；
位置：相对位置；
光标：指针；
字体系列：“Ubuntu”，无衬线；
}
.内容{
位置：绝对位置；
底部：0；
右：0；
排名：0；
保证金：自动；
填充：0.4em；
z指数：2；
高度：3em；
过渡：所有。2轻松；
}
a:悬停。内容{
高度：8em；
过渡：所有。2轻松；
}
氢{
字号：2em；
字体大小：正常；
保证金：0.5px 0；
}
p{
身高：0；
不透明度：0；
可见性：隐藏；
保证金：5px；
线高：1.5em；
}
a:悬停p{
高度：3em；
不透明度：1；
能见度：可见；
过渡：所有。2轻松；
}
.链接{
高度：1.5em；
线高：1.5；
过渡：所有。2轻松；
显示：块；
字号：0.85em；
字体：斜体；
}
a:悬停，链接{
过渡：所有。2轻松；
}
.说明{
文本对齐：居中；
}

唐纳德法官
远程教育副教务长



GLBL505


479-575-7571


djudges@uark.edu
点击阅读更多>>

代码对我来说很好，他们使用css hover

a:hover p

来获取要显示的附加信息。这里有一个简单的例子，同样的东西也能用

p {
  height: 0;
  opacity: 0;
  visibility: hidden;
  margin: 5px;
  line-height: 1.5em;
}

a:hover p{
 height: 3em;
  opacity: 1;
  visibility: visible;
  transition: all .2s ease;
}

---

请展示你拥有的代码和你尝试过的内容。嘿，Kirsch，看起来你忘了链接你的示例，请编辑你的帖子并添加示例，以便我们可以帮助你。谢谢。这次包括链接吗？在编辑斯科特·马库斯的问题库中发布链接会让我感到困惑。几分钟前刚注意到他们