使用 CSS 的导航悬停效果答案

【问题标题】：Navigation Hover Effect with CSS使用 CSS 的导航悬停效果
【发布时间】：2012-12-28 15:52:13
【问题描述】：

我正在尝试使用带有菜单项的背景来实现悬停效果，但是使用 css 时，我的东西似乎不合适。我尝试了很多不同的方法，但仍然不知道如何在悬停时让菜单项保持在原位，也不知道如何让文本粘在背景的底部。

http://youvisit.com/creative/FindYourFutureCampaign/html/

【问题讨论】：

您应该在问题中提供一个完整的示例和代码。

标签： css navigation css-float padding margins

【解决方案1】：

问题在于，通过添加左/右图像（带有圆角的图像），您正在更改 <li> 的宽度和高度。由于这些图像的高度为 19 像素，因此您需要将 <li> 的高度设置为 19 像素。您可以使用line-height 和height 执行此操作。之后，您必须弄清楚如何垂直对齐<a> 中的文本。然后，您需要调整宽度的变化。您可以通过在<a> 上使用左/右填充来做到这一点，然后在悬停时删除该填充（删除的填充应该等于左/右图像的宽度）。

这应该让您非常接近。我没有在 IE7/8 中测试过。

ul.menuItems li {
    float: left;
    height: 19px;
    line-height: 19px;
    margin-right: 20px;
}
ul.menuItems li a {
    color: #000000;
    display: block;
    float: left;
    height: 19px;
    line-height: 19px;
    padding: 0 2px;
    text-decoration: none;
}
ul.menuItems li:hover a {
    background: url("../img/menuHoverCenter.png") repeat-x 0 0;
    padding: 0;
}
ul.menuItems li:hover:before {
    content: url("../img/menuHoverLeft.png");
    float: left;
}
ul.menuItems li:hover:after {
    content: url("../img/menuHoverRight.png");
    float: right;
}

真的，这是一个糟糕的设计。您可能不需要在悬停时添加内容。如何使用 CSS3 border-radius 来获得圆角。然后使用linear-gradient 或背景图像作为您的背景。 border-radius 并非所有浏览器都支持，但如果您不担心 IE8 及更低版本，它的支持相当不错：http://caniuse.com/#search=border-radius

【讨论】：

是的，我意识到 css3 将是替代使用图像作为背景的简单解决方案，但问题是我的老板希望确保学校管理员能够看到与现代浏览器相同的设计，并且他们中的大多数人仍在使用低版本的 IE.... :(
好吧，我会修改我的答案，包括一些你需要的 CSS。
好的，我更新了我的答案（见上文）。让我知道这是否有帮助。
谢谢。像魔术一样工作。我检查了它是否也适用于 IE9 我想这已经足够好了:)

【解决方案2】：

修复你的css，它不会“跳转”：

ul.menuItems li:hover:before {
    background: url("../img/menuHoverLeft.png") no-repeat 50% 0%;
}
ul.menuItems li:hover:after {
    background: url("../img/menuHoverRight.png") no-repeat 50% 100%;
}

并给height 和width 以正常工作。

【讨论】：

这不起作用。内容将内联内容添加到元素。此外，content 不支持 background 属性。看来你把两者搞混了。
给出宽度和高度将有助于解决问题，但您仍然不能拥有no-repeat 和content 中的定位。这是不正确的。