图像-鼠标悬停,按钮出现

发布于 2024-09-08 14:46:07 字数 691 浏览 7 评论 0原文

我有一个测试页面:

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

我喜欢什么创建:

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

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

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

更新:

关于Dobiatowski的回答:

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

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

有办法修复它们吗?

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

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

IE 6(按钮出现在右图像后面,边框损坏 - 错误)

I have a test page:

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

What I like to create:

If you hover over the image, the black button with the text and the links will appear.
If you leave the image with the mouse, the button (with the text and links) will disappear.

How can I create this? It should be work with IE6-7.

PS: I used this, to center the button over the image: css-vertical-center-solution

Update:

Regarding Dobiatowski's answer:

Here is my css solution (menue technique). Link to the last version: link text

The mouseover works fine with IE6, and all modern browsers. But I have some Display errors.

Is there a way to fix them?

IE 8/9 an all modern browsers (optimal)

IE 7 (the Button appears behind the right image — error)

IE 6 (the Button appears behind the right image, the border is broken — error)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

℡寂寞咖啡 2024-09-15 14:46:07

您可以在 css 或 javascript 中执行此操作

javascript:

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

问题是当您将鼠标移到 div 上时,因此 img 会启动 onmouseout 事件。

you can do this in css or in javascript

javascript:

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

the problem will be when you move your mouse over the div, so img fireup onmouseout event.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文