1

サイトの「特集」セクションを開発しています。左側の要素にカーソルを合わせると、右半分のフェードインがトリガーされるという考えです。

これは、要素の重なりがある場所 (赤い線の間の中央のどこでも) を除いて機能しています。フェードイン効果のちらつきの原因となります。

ワイヤーフレーム

これは機能の HTML です

<div id="feature">  
<div id="left-overlay">...Right</div>
<div id="left-feature"><h2>Left</h2></div>
<div id="right-overlay">...Left</div>
<div id="right-feature"><h2>Right</h2></div></div>

そして、これはjQueryです

$('div#left-feature').hover(function () {
    $('div#left-overlay').stop().css({'z-index' : '10'}).fadeTo('normal', 1);
}, function () {
    $('div#left-overlay').stop().fadeTo('normal', 0).css({'z-index' : '-10'});
});

どんな助けでも大歓迎です。

このコードとその機能のデモへのリンクを追加しました - http://jsfiddle.net/jamescallaghan/7rLhS/

4

1 に答える 1

1

問題は次のとおりです。ホバリング要素の上に配置されたオーバーレイ div に 10 の z-index を追加している間 (したがって、もうホバリングしていません)。

解決策は、オーバーレイ div をホバリング div 内に配置することです。

<div id="feature">    

<div id="left-feature"><h2>Left</h2>
<div id="left-overlay">...</div>
</div>  


<div id="right-feature"><h2>Right</h2>
<div id="right-overlay">...</div>
</div>

その後、ちらつきは見られません。

さらに、別の方法で id コード jquery を追加します (ただし、あなたの方法もまったく問題ありません..)

$(document).ready(function() {

$("div#left-overlay, div#right-overlay").hide();

$('div#left-feature').hover(function() {
    $('div#left-overlay').fadeIn();
}, function() {
    $('div#left-overlay').hide();
});

$('div#right-feature').hover(function() {
    $('div#right-overlay').fadeIn();
}, function() {
    $('div#right-overlay').hide();
});
});

CSSでは、必要ありません：

display:block; /*its a div, and those have block n-e-ways*/
opacity:0; /*i do this via jquery, or you make display: none; (for those whithout js)*/
-moz-opacity:0;
filter:alpha(opacity=0);
z-index: -10; /*no need for swapping z-index*/

ボックスを別の場所に配置する必要があるため、絶対位置が周囲のdivのゼロから始まりますが...

于 2011-03-21T11:59:28.510 に答える