16

「ロールオーバーボタン」を装ったタグが3つあります。

<div id="buttons">
    <a class='button' id='but1' href=''></a>
    <a class='button' id='but2' href=''></a>
    <a class='button' id='but3' href=''></a>
</div>

各ボタンは、次のように CSS から初期画像を取得します。

.button{
    background:url(theimage.jpg);
    width;height; etc...
}

今、特定の要素ごとに初期背景位置を割り当てようとすると:

#but1{
    background-position:0 0;
}
#but1:hover{
    background-position:0 -50px;
}

#but2{
    background-position:0 -100px;
}
#but2:hover{
    background-position:0 -150px;
}

#but3{
    background-position:0 -200px;
}
#but3:hover{
    background-position:0 -250px;
}

問題:各ボタンのデフォルトの位置は 0 0です

ホバー位置が期待どおりに機能することに注意してください。

私は今ちょっと気分が悪いので、これはおそらく見落としかもしれませんが、私はこれに1時間足を踏み入れていて、それを理解することができません.

何かご意見は？

ありがとう

編集ペーストビン愛http://pastebin.com/SeZkjmHa

4

6 に答える 6

39

私はあなたの問題を再現していません。どのブラウザ？

最初に考えたのは (エラー ケースを表示せずに)、最初の背景定義を完全な 'background:' から background-image 宣言に変更することです。

.button{
  background-image:url(theimage.jpg);
  width;height; etc...
}

background-position のコンテナーである background を設定することにより、一部のブラウザーでは特定の問題が発生する場合があります。

于 2011-05-18T00:42:52.767 に答える
10

「背景」の省略形プロパティを分割します。

省略形プロパティのエントリの 1 つを省略した場合、省略されたエントリは、そのまま放置されるのではなく、デフォルトにリセットされます。

したがって、何が起こっているかは、多かれ少なかれこれと同等です。

#someElement {
    background-position:0 -100px;
    background:url(image.png) no-repeat;
    /* ^--- omitted background-position gets reset to the default */
}

短縮形を別のエントリに分割します。

#someElement {
    background-image:url(image.png);
    background-repeat:no-repeat;
}

EDIT：あなたのコードでは、background-position値は値の後に来backgroundます...しかし、セレクターはおよび 同様のセレクター#buttons .buttonよりも具体的であると確信しています。#retain-our-firm

于 2011-05-18T01:36:17.027 に答える
5

これは何年も前に尋ねられたことは知っていますが、修正したと思います。

私はまったく同じ問題を抱えていました.Chromeなどではポジショニングが機能していましたが、Firefoxでは機能していませんでした.

ばかげた答えを理解するのにとても時間がかかりました、

background-position     :   7 4;

Chrome では動作しますが、Firefox では動作しません..

background-position     :   7px 4px;

両方で動作します。

于 2013-04-11T05:25:20.243 に答える
1

バックグラウンド プロパティhttp://jsfiddle.net/kTYyU/を分割すると機能します。

#buttons .button{
    display:block;
    position:relative;
    float:left;
    width:250px;
    height:80px;
    padding-left:20px;
    background-image:url(http://www.websitesforlawyers.us/images/valid_xhtml_code_icon.png);
    background-repeat:no-repeat;
}
于 2011-05-18T01:06:09.250 に答える
0

<ul> <li> </li> <ul>? この方法の方がはるかに簡単です。お気に入り：

<ul class="buttons">
    <li  href=''></a>
    <li  href=''></a>
    <li  href=''></a>
</ul>

css部分について

.buttons li{
    background:url(theimage.jpg);
    width;height; etc...
}

.buttons li:hover{
    background-position:0 0;
 }

それが機能するかどうかを確認してください;）

于 2011-05-18T00:58:35.400 に答える
0

この問題は、クラスで不完全な省略形のプロパティを宣言したことが原因だと思います.button。

修正された例は jsFiddle で見ることができます: http://jsfiddle.net/rRVBL/

于 2011-05-18T01:14:58.377 に答える