图像鼠标悬停，按钮出现

Question

我有一个测试页面：

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

我喜欢创造什么：

如果您将鼠标悬停在图像上，则会出现带有文本和链接的黑色按钮。 如果您用鼠标离开图像，按钮（带有文本和链接）将消失。

我怎样才能创建这个？它应该适用于 IE6-7。

PS：我用这个来将按钮置于图像的中心：css-vertical-center-solution

更新：

关于多比亚托夫斯基的回答：

这是我的 css 解决方案（菜单技术）。上一版本链接：link text

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

有办法解决吗？

IE 8/9 和所有现代浏览器（最佳）

IE 7（按钮出现在右图后面——错误）

IE 6（按钮出现在右图后面，边框坏了——错误）

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 事件。