2

ホバーされた要素の不透明度を変更する Jquery で設定されたホバー効果があります。body 要素の背景をシフトする Chrome を除いて、最近のすべてのブラウザで問題なく動作します。

リンクはこちら：http ://wrong.ro/tataia/

私の作業環境は次のとおりです: Google Chrome v18.0.1025.162 / Windows 7 x64。

これに対する回避策はありますか? 前もって感謝します！

4

2 に答える 2

2

これに非常に近いことを経験しました。私の場合、ホバー時に不透明度を変更すると、前景の画像要素が揺れました。特定の原因は、（私が使用していた）変換の使用に関連しているようです。修正は簡単でした-問題の img 要素に追加しました：

-webkit-backface-visibility: hidden;

もう揺れません。これが実際に何をするのかはよくわかりませんが、奇妙な副作用はなく、問題は修正されました。

私は試していない別の解決策も見ました - どうやら他の人がこれを経験し、回転で修正しました:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
于 2015-10-13T17:38:07.517 に答える
1

ようやくChromeで問題を確認できました。それは非常に微妙なので、探しているものを正確に知らない限り、見落としがちです。

私はまだ残りの問題に取り組んでいますが、中央下部にある「stiati ca」のロゴにカーソルを合わせると、背景が画像の左側に少し移動していることがわかりました.

この問題background-sizeは、CSS のここの部分に関連しているようです。行を削除するbackground-sizeと、問題は完全になくなります。それが問題の実際の原因だと言っているわけではありませんが、それが最初の手がかりです。調査のこの時点での私の推測 (回答の後半でさらに詳しく説明します) は、ホバー内の何かがドキュメントのサイズを変更し、背景が再スケーリングされてシフトすることです。

body {
    background: black url('../img/bck.jpg') left top fixed no-repeat;
    moz-background-size: cover;
    background-size: cover;
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale')";
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale');
}

これをさらに追求すると、CSS のこのブロックから text-indent 行をコメントアウトすると、次のことがわかります。

a#stiati_ca{
    display: block; width: 124px; height: 124px;
    xtext-indent: -9999em;
    background: url('../img/stiati_ca.png') no-repeat;
    margin: 88px auto 0;
}

その後、ロゴにカーソルを合わせると、問題は完全に解消されます。もちろん、あなたのリンクには表示したくないと思われるテキストがいくつかありますが、HTML を修正して別の方法で動作させることができます。固定サイズの div (リンクにテキストなし) を含むリンクを使用し、リンク自体ではなく div に背景画像を設定することをお勧めします。これはクロスブラウザでより安全な方法であり、テキストインデント行は必要なく、ロゴ画像の背景シフトの問題は解消されます。リンク内のテキストが本当に必要だが表示したくない場合は、それをスパンに入れて、スパンを非表示にしdisplay: noneます。いずれにせよ、背景画像は<a>ではなく、リンク内の適切なサイズの要素に設定する必要があります。これはうまくいくはずです。

上位 4 つの画像で同じ問題が発生する理由はまだわかりません。それが分かれば記事に追記します。

于 2012-04-24T20:56:26.927 に答える