0

内部の div を変更せずに、jQuery fadeTo を使用して div (エラー クラス) の背景色をフェードしようとしています。ただし、Chrome と Firefox では、「エラー」div と内部 div 内のテキストの両方がフェードします。IE では機能します。エラー div だけがフェードしますが、その中の div はフェードしません。すべてのブラウザで動作するようにするにはどうすればよいですか?

簡単に言えば、内側の div をまったくフェードさせたくありません。

意見 -

<div class="error" style="display: inline-block;z-index:1;">
<div style="position:relative;z-index:2;">Error: <%= @a[:error] %>
</div>
</div>

html -

<div class="error" style="z-index:1;height=300px;width=500px;">
<div style="position:relative; z-index:2;">Error: some error</div>
</div>

ジャバスクリプト -

$(document).ready(function(){
$(".error").fadeTo("slow",0.20);
});
4

2 に答える 2

0

fadeTo の使用については、こちらの回答を参照してください。簡単な答えは、不透明度がすべてのサブ子に適用されるため、fadeTo ではこれができないということです。アニメートを使用し、背景色のアルファが 0 になるように設定します。

于 2016-08-21T21:52:25.640 に答える
0

これは、すべての要素のデフォルトの背景が実際には透過的であるためです。内側の div の透明な背景は、外側の div の変化する背景を示しています。

これを防ぐには、エラー div 内の div に明示的な背景を指定します。たとえば、次の css を使用します。

.error div { background: white; }

つまり、「クラス「エラー」の div 内のすべての div に白い背景を与えます。」

于 2012-04-16T03:14:34.157 に答える