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位置（つまり2番目）を変更する必要があり、左または右にスライドさせたい場合は、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 に答える