css - 图像鼠标悬停，出现按钮

Question

我有一个测试页:

http://www.youmethem.com/test/divdiv.html

我喜欢创造什么:

如果将鼠标悬停在图像上，将出现带有文本和链接的黑色按钮。 如果鼠标离开图像，按钮(带有文本和链接)将消失。

我该如何创建它？它应该与 IE6-7 一起工作。

PS:我用它来使按钮在图像上居中:css-vertical-center-solution

更新:

关于 Dobiatowski 的回答:

这是我的 css 解决方案(菜单技术)。最新版本链接:link text

鼠标悬停在 IE6 和所有现代浏览器中都能正常工作。但是我有一些显示错误。

有办法解决吗？

IE 8/9 和所有现代浏览器(最佳)

IE 7(按钮出现在右图后面——错误)

IE 6(Button 出现在右图后面，边框坏了——错误)

Answer 1

你可以在 css 或 javascript 中做到这一点

JavaScript:

<img onmouseover="document.getElementById('div12').style.display = 'block';"
onmouseout="document.getElementById('div12').style.display = 'none';" src='img.jpg'/>

当您将鼠标移到 div 上时会出现问题，因此 img 会触发 onmouseout 事件。