1

このページにはいくつかのボタン(下部にある小さなアイコン) があり、背景を変更するためにいくつかの CSS トランジションを使用しています。しかし、アイコンが最初にホバーされたときにちらつきがあります! このスレッドで提供されている提案を実装しようとしましたが、役に立ちませんでした。ちらつきなしでこれを機能させる方法について誰か考えがありますか?

どうもありがとう！

4

2 に答える 2

3

最小限のテストケースが提供されていないため、画像をプリロードする必要があり、トランジションは問題とは何の関係もないと思います。

背景画像は、要素の通常の (ホバーではない) 状態の背景として指定し、background-position負の値を追加して背景画像が通常の状態で表示されないようにすることで、事前に読み込むことができます。

例えば：

/* Image is supposed to have height less than 100px here. */
A {
    background: url(example.png) 0 -100px no-repeat;
}

A:hover {
    background-position: 0 0;
}

ところで、両方の状態 (通常とホバー) のイメージを 1 つの物理イメージ ファイルにbackground-position配置し、ホバリング時に変更することが確立されています。

/* "rollover-sprite.png" file contains images for both states side by side. */
A {
    background: url(rollover-sprite.png) no-repeat;
}

/* Width of image for each state is supposed to be 100px here
  (sprite will be ~200px wide). */
A:hover {
    background-position: -100px 0;
}
于 2012-10-22T16:25:37.537 に答える
0

切り替える画像をプリロードする必要があります。「ちらつき」とは、ホバーしてから実際に画像が読み込まれるまでの短い遅延のことです。これを行う方法はたくさんありますが、jQueryを使用していますか？

于 2012-10-22T16:29:44.907 に答える