图像-鼠标悬停,按钮出现
我有一个测试页面:
我喜欢什么创建:
如果将鼠标悬停在图像上,则会出现带有文本和链接的黑色按钮。 如果用鼠标离开图像,按钮(带有文本和链接)将会消失。
我怎样才能创建这个?它应该适用于 IE6-7。
PS:我用这个将按钮置于图像的中心:css-vertical-center-solution
更新:
关于Dobiatowski的回答:
这是我的css解决方案(菜单技术)。链接到最新版本: 链接文本
鼠标悬停在 IE6 和所有现代浏览器上都可以正常工作浏览器。但我有一些显示错误。
有办法修复它们吗?
IE 8/9 所有现代浏览器(最佳)
IE 7(按钮出现在右图像后面 - 错误)
IE 6(按钮出现在右图像后面,边框损坏 - 错误)
I have a test page:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以在 css 或 javascript 中执行此操作
javascript:
问题是当您将鼠标移到 div 上时,因此 img 会启动 onmouseout 事件。
you can do this in css or in javascript
javascript:
the problem will be when you move your mouse over the div, so img fireup onmouseout event.