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>的宽度和高度。由于这些图像的高度为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

使用CSS导航悬停效果

2 个答案: