0

ボタンを作成し、ホバー時とアクティブ時に変化する背景画像を使用し、アクティブ状態でアンカーの境界の外に広がる画像を表示することはできますか? ここに私のスプライトがあります：

https://dl.dropbox.com/u/7737304/menu-sprite1.png

スプライトの上半分は「ホバー」、下半分は「アクティブ」です。実線のバーの下にはクリック可能なリンクは何もありません。メニューテキストが上に設定され、画像の左右の端を超えて広がるため、幅を設定したくありません。

背景画像を親の li タグに割り当てようとしましたが、これは「ホバー」で機能しますが、「アクティブ」で機能させることはできません。

何か案は？

CSS

.navigation li:hover{
background: transparent url(../images/menu-sprite.png) center -86px no-repeat;
}
.navigation a{
color: #e8e8e8;
font-weight: bold;
text-transform: uppercase;
padding:0.5em 0.8em;
}
.navigation a:hover{
color: #fff;
}
.navigation a.active {
color: #fff;
}
4

3 に答える 3

0

このような意味ですか？

アンカーはアクティブなときに「拡張」しますが、実際には以前と同じサイズにするために負のマージンを使用するため、フローは変更されません。

したがって、アンカーを拡張するパディングの量を追加してから、負のマージンと同じ量を追加します。（アンカーはblockorinline-block要素である必要があります。そうしないと、マージンを使用できません）

このメソッドではJavaScriptは必要ありません。

于 2012-06-21T14:14:54.327 に答える
0

これは説明するのが難しいです！私がしたことは、aタグをクリック可能にし、それを変更するために必要なスタイルを適用できるように拡張しましたが、クリック可能にすることではありませんでしたli。::after

私が言ったように、説明するのは難しいですが、ここにデモがあります: http://jsfiddle.net/cchana/SgH5C/

そして、これがあなたを助けるかもしれないいくつかのCSSです:

.navigation li::after {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat;
    bottom: 0px;
    content: '';
    display: block;
    height: 31px;
    position: absolute;
    width: 100%;
}
.navigation li:hover::after {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat;
}
于 2012-06-21T14:20:27.897 に答える
0

これが私が思いついたものです：DEMO

に背景画像を配置するだけ<li>です。これがまさにあなたが探しているものかどうかはわかりません。

于 2012-06-21T14:15:08.930 に答える