2

我正在尝试使用 CSS 精灵创建垂直导航菜单。我想在其中添加一个悬停效果，菜单选项会滑出一点。

a:link {
  background: url(images/nav.png);
  background-position: -100px 0px;
  width: 150px;
}

a:hover {
  background: url(images/nav.png);
  background-position: -100px 0px;
  width: 160px;
}

所以我对 a:link 和 a:hover 使用相同的精灵图像。我只是在 a:hover 的情况下增加宽度以创建弹出效果。

考虑这个类比。如果我的标签都在 x=0 处对齐，这是我目前的情况。

a:link   tab start: x=-100   tab end: x=0  // this is how all links are arranged
a:hover  tab start: x=-110   tab end: x=0  // this is how I want them on hover
a:hover  tab start: x=-100   tab end: x=10 // this is how its panning out

这是我完整的css代码：

#navmenu {
    left: 100px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 150px;
    width: 150px;
    z-index: 99;
}

#navmenu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#navmenu ul li {
    line-height: 1.5em;
    padding: 0px;
}

#navimenu ul li a {
    color: black;
    display: block;
    font-weight: bold;
    height: 26px;
    padding: 0px 15px 0px 0px;
    text-align: right;
    width: 150px;
}

#navmenu a:link, #navmenu a:visited {
    background: url(images/nav.png) no-repeat;
    background-position: -150px 0px;
    width: 150px;
}

#navmenu a:hover {
    background: url(images/nav.png) no-repeat;
    background-position: -150px 0px;
    width: 160px;
}

有人可以帮我吗？

谢谢

4

1 回答 1

1

好吧，如果你想向上或向下移动它，那么你应该改变 y 位置（即第二个），如果你想让它向左或向右滑动，你应该改变 x 位置：

background-position: x y;

因此，如果我理解正确，您希望背景图像与左侧对齐，即使您悬停链接：

#navmenu a:hover {
    background: url(images/nav.png) no-repeat -160px 0;
    width: 160px;
}

这是你想要的吗？

顺便说一句，你的问题有点模棱两可。您是说图像的大小“向右增加”（我不知道您的意思是什么，但它与 x 轴有关）然后您开始谈论“基础”和“头部” （y轴）

于 2010-06-06T16:05:33.233 回答