html - 带有悬停的 CSS 菜单可更改整个框架图片

标签 html css

我制作了一个 CSS 菜单,应该在悬停时替换其他菜单(应该替换中心图像和菜单链接上的悬停)。我的想法是使用整个中心作为带有按钮的背景图像,因此菜单和中心是相同的图像。

垂直悬停时,菜单工作正常。但是在悬停另一个链接后我无法返回,因为链接不活动,因为它们必须由于顶部边距(或类似的东西)而隐藏。您可以在底部看到菜单(蓝色按钮在底部变为红色):

http://www.israelijewel.com/1.html

最佳答案

这样做的奇怪模式,你为什么不这样做:

在 .home-gallery 中的每个“a”中,将您想要的图像放在中心位置:absolute;display:none;并定位使用它的绝对位置。然后你可以让它出现在中心做这样的事情:

.mofet-link:hover {
  //set you button to red here
}
.mofet-link:hover .inside_image {
  display: block;
}

你应该给 .home-gallery 设置一个 position:relative;也是属性

关于html - 带有悬停的 CSS 菜单可更改整个框架图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22895486/

相关文章:

html - 从表格单元格中删除空格

html - Bootstrap 固定表头不隐藏表单/按钮字形

css - 滑动背景

html - 点击label导致img上移

html - 坚持尝试对齐 HTML CSS

javascript - 在里面插入一个动态值

html - 如何让html5音频播放器响应式?

jquery - 使用 animate jquery 时 css 宽度不显示

javascript - document.querySelector 直接后代问题

使用媒体查询后 HTML 被禁用