Html 将div框覆盖在鼠标上方的最简单解决方案？

整夜都在做这件事还没解决。。。 我有一个链接，当用户将鼠标悬停在它上面时，它应该在链接下面显示一个框（div）。这个盒子应该覆盖它下面的任何东西。我怎样才能用最简单的方式在纯CSS的方式下完成呢

Thx Yummi

正文{
背景色：#6b；
背景：url(http://wizzfree.com/pix/bg.jpg)固定的；
背景大小：100%100%；
背景重复：无重复；
字体系列：Arial；
颜色：暗灰色；
字体大小：14px；
线高：.3；
字母间距：.5px；
利润率：50像素；
} 
/*............... 表情符号*/
.表情符号{
位置：绝对位置；
填充：25px 15px 10px 20px；
边界半径：20px 0px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.emojis2>img{
位置：绝对位置；
左：100%；
排名：0；
}
斯迈利先生{
位置：绝对位置；
顶部：25px；
左：430px；
}
/*... 输入消息*/
输入[类型=文本]{
宽度：300px；
高度：50px；
边界：无；
大纲：无；
左侧填充：37px；
字体系列：Arial；
颜色：白色；
字体大小：16px；
字体大小：粗体；
字母间距：1.5px；
背景色：rgba（0,0,0,3）；
}

对于纯CSS，丑陋的黑客是先隐藏
div
，然后在鼠标悬停时显示它。由于代码中唯一的链接是
href=“emojis.html”
，下面的示例显示带有“emojis.html”文本的moverover div：


正文{
背景色：#6b；
背景：url(http://wizzfree.com/pix/bg.jpg)固定的；
背景大小：100%100%；
背景重复：无重复；
字体系列：Arial；
颜色：暗灰色；
字体大小：14px；
线高：.3；
字母间距：.5px；
利润率：50像素；
}
/*............... 表情符号*/
.表情符号{
位置：绝对位置；
填充：25px 15px 10px 20px；
边界半径：20px 0px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.emojis2>img{
位置：绝对位置；
左：100%；
排名：0；
}
斯迈利先生{
位置：绝对位置；
顶部：25px；
左：430px；
}
/*... 输入消息*/
输入[类型=文本]{
宽度：300px；
高度：50px；
边界：无；
大纲：无；
左侧填充：37px；
字体系列：Arial；
颜色：白色；
字体大小：16px；
字体大小：粗体；
字母间距：1.5px；
背景色：rgba（0,0,0,3）；
}
a、 特别的{
位置：相对位置；
}
a、 希迪夫特别分部{
背景色：白色；
显示：无；
位置：绝对位置；
z指数：100；
宽度：自动；
填充：10；
}
a、 特别：悬停div.hidediv{
显示：块；
}