問題タブ [background-position]

ロールオーバートップメニューがあります。背景画像（17px x 13px）が中央に表示されるように取得しようとしています。背景の CSS 属性をすべて試しましたが、何も機能しないようです。私はこれについて間違った方法で進んでいますか？

ここに私のCSSがあります:

ここにページへのリンクがあります。

http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html

jQuery の場合:

シナリオ ** - ホバー効果を持つ 4 つの Div があります。- すべて jquery アニメーションを使用して backgroundPosition を移動し、ホバー状態を表示します。

問題 ** - フォーカスまたはクリック状態を設定したいので、ボタンをクリックすると、背景位置がさらにアニメーション化されて新しい状態が表示されます。また、他のボタンがクリックされた場合にボタンが認識され、現在のクリック状態が削除され、新しく選択されたボタンで新しいクリック状態のアニメーションが開始されるようにしたいと思います...??

私の努力 ** - 少しコーディングを行いましたが、このフォーカス状態を解決できないようです。よろしくお願いします!! ;)

HTML **

CSS **

jQuery **

CSS3 の背景カスタマイズは強力なツールですが、私にとっては 1 つの機能が欠けています。background-positionを設定する方法はいくつかありますが、それらの組み合わせが必要です。たとえば、動的にサイズ変更された div があり、右の境界線から 15 ピクセルの右中央の画像が必要です。これを処理する方法が見つかりません。2 つの修正を使用できますが、どれもエレガントではありません。
1. 写真の右側に 15px の空白領域を残します。
2. これを使用します: background-position: 97% 50%
しかし、2 番目のケースでは、div のサイズが変更されると、計算された右マージンが正しくなくなります。または、bg-image の代わりに標準のイメージを使用しますが、これを回避しようとします。
それで、解決策はありますか？
ありがとう！

このようにして、背景が垂直方向に移動します

このように、そうではありません

どうすればこれを解決できますか？

position: 0%;位置をどのように変更するかの背景を持つ div 要素があるとしposition: 100%;ましょう。

キーフレームを適切に使用できないようです。まったく機能せず、すべて最新のブラウザーを使用しています。

ありがとう。

配列から値を取得し、要素のbackground-positionプロパティに適用する非常に単純なカウントダウン タイマーを js で作成しました (これは、の値に応じて画像の別の部分を表示しますcurS)。

コードは次のとおりです。

これは FF、Chrome、Opera などでは機能しますが、IE 7/8 では機能しません。私は、IE が古い background-position で少し不安定であることを認識しており、IE がbackground-position-x&を好むことを読みました。background-position-y

そこで、次のコードを IE のみの条件内に配置しました。

これも機能しませんでした。カウンターは静的なままです。誰もこの問題に光を当てることができますか? よろしくお願いします。

基本的にはcssでロールオーバーを行いましたが、代わりにjavascriptでやりたいです。また、ページが読み込まれると、写真の1つが自動的に選択されます。そのためにこのコードを試しましたが、うまくいきません..何かアイデアはありますか? 何らかの理由で関数を呼び出していません。ps: ID は、私の html でも clicked3 と呼ばれます

私はJQueryのアニメーションメニューをやっています。これは、私の質問に関連するコードの一部です。

私は（JQueryを使用して）アニメーション化されたdivをたくさん持っているので、左右に拡大します。div では背景画像を使用します。div が拡大および縮小するときに、画像が動かないように配置したままにします。

これは (動作する) 自己完結型の完全な例です。これを .html として保存して試してください。（どうにかスタックオーバーフローでこれを添付できますか？）

http://jsbin.com/eyojah

2 つの質問:

1) バックグラウンド ポジションのパーセンテージはどのように計算されますか? 試行錯誤の結果、ここでは 20% が正しいことがわかりました。div は、展開時は左 = 0、幅 = 600 ピクセル、折りたたみ時は左 = 100、幅 = 100 です。それがどうやって20%になるの？折りたたまれたサイズの左端であるべきではありませんか (100/600 = 16.666%?) 明らかにそうではありませんが、なぜですか?

2) これは Firefox では桃色に見えますが、Safari と Chrome (私は OSX を使用しています) では、アニメーションの進行中に画像が揺れます。他のブラウザで見栄えが良くなるように修正する方法について何か考えはありますか?

基本的に、ロールオーバーを CSS から JavaScript に変換しました。また、ページが読み込まれたときに選択される画像の 1 つを選択しました。しかし、onMouseOut イベントに問題があります。その写真を除いて、すべてが完璧に機能します。他の画像にカーソルを合わせると、その画像が選択されたままになります。複数の方法を試しましたが、修正方法がわかりません..何かアイデアはありますか？

わかりました、javascript ロールオーバーがあります。clicked3 の画像を最初に選択したいのですが、それをロールオーバーするか、他の画像をロールオーバーすると、clicked3 の選択が解除されます。私のhtmlの画像IDは、clicked1、clicked2、clicked3、clicked4です。このコードを実行しましたが、機能しません。ピクチャ 1 のロールオーバーが機能しておらず、ピクチャ 3 が選択されていないようです...何か助けはありますか?