使用CSS实现导航悬停效果

Question

我试图通过菜单项的背景来实现悬停效果，但使用css时，我看到的东西似乎不太合适。我尝试过很多不同的东西，但仍然不能弄清楚如何让菜单项在悬停时保持在原位，也不能让文本粘在背景顶部的底部。

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

Answer 1

问题是，通过添加左/右图像(带有圆角的图像)，您正在更改<li>的宽度和高度。由于这些图像的高度为19px，因此您需要将<li>的高度设置为19px。您可以使用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

Answer 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一起正常工作。