1

このスライドショーには、ホバー上に表示されるオーバーレイが表示されます。hereを表示できます。 「おすすめ」のセクションの下にある画像にカーソルを置くだけです。 FF、Webkit、IE9でうまくいきます。私はIE9未満のための別のスタイルシートを作ったと私は、IEで動作するすべてのフィルタを使用して、幅、高さ、ズーム、位置を宣言....と私はIE7またはIE8の不透明になっていないよ。クラスのオーバーレイを持つdivにJQueryが追加されていますが、これは問題ですか?ここに私のCSSは次のとおりです。hasLayoutがトリガーされていてもIE7またはIE8でCSSの不透明度が機能しない

.overlay { 
background-color:#fff; 
filter:alpha(opacity=60); 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); 
zoom:1; 
width:160px; 
height:20px; 
z-index:50; 
position:absolute; 
bottom:0; 
} 
+0

私のためにIE8でうまく動作するようです。ホバーで100%にフェードアウトし、その後マウスオーバーで0%にフェードしますか? – nav

+0

IE7/8はどのようにテストしていますか? IE9のブラウザモード?仮想マシン? IETester? – thirtydot

+0

私はWindows上でブラウザモードを使用してテストしていますが、60%の不透明度しか持たないはずです。 – huzzah

答えて

2

あなたのフェージング・ルーチンは、あなたのCSSであなたのfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65)をオーバーライドしているprogid:DXImageTransform.Microsoft.Alpha(Opacity=60)につながるインラインスタイルを追加しています。フェードルーチンではインラインスタイルを使用するのが一般的ですが、(65%の不透明度で)どこでも終了するか、フェード後に消えてCSSが使用されるようにする必要があります(Firefoxインラインでフェードしているように見えてから、スタイルシートの不透明度を取得するようにインラインを削除しているように見えます)。

編集(jQueryを使ってフェージングにコメントから追加情報):あなたが.fadeIn()を使用している場合は、.fadeTo(400, 0.65)を使用する代わりにしてみてください(http://api.jquery.com/fadeToを参照してください)あなたはそれを変えることができるので、400は、.fadeIn()のデフォルトの期間であり、第二numberは最終的な不透明度の設定です

+0

Hmm、ok。私はフェードインとアウトのためにJQueryを使用しています.....これは私のための新しい領域です。あなたはそれをどうやってするのか分からないでしょうか? – huzzah

+1

@Heather Walters - '.fadeIn()'を使用していて '.fadeTo(400、0.65)'(http://api.jquery.com/fadeTo/を参照)を使用する代わりに、400は'.fadeIn()'のデフォルトの継続時間を変更することができます.2番目の数値は最終的な不透明度の設定です。 – ScottS

+0

うわー、それは完全に働いた!私はあなたに信用を与えることができるので、あなたの答えにこれを追加できますか? – huzzah

関連する問題