css - 使用 CSS 的导航悬停效果

Question

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

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

Answer 1

修复你的 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工作。

Answer 2

问题是，通过添加左/右图像（带有圆角的图像），您正在更改<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;
}

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