divのスパン、divに振り回されたときにスパンが消えたい

Question

私はオーバーレイと呼ばれるdivクラスを持っています。それは単なる透明なボックスです。ライブボックスのdivにマウスポインタを置くと、スパンクラスが表示されなくなり（現在はオーバーレイボックスの下に表示されます）、テキスト「テスト」が表示され、その下に矢印が表示されます（作業中）。

基本的にすべてが機能しますが、オーバーレイdivの下でスパン内のテキストがジャンプします。私はいくつかのjqueryを試みましたが、フェードイン/フェードアウトのために、オーバレイ部門の下に半秒間ジャンプします。

<div class="live-box-outer"> 
    <div class="live-box" id="CMS"> 
     <div class="overlay" style="display: none"> 
      test 
      <div class="arrow"> 
      </div> 
     </div> 
     <span class="long-span">Content Management</span> 
    </div> 
</div> 

私のjavascript

$('.live-box').hover(function() { 
    $(this).not('.active, .invisible').find('.overlay').fadeIn(300); 

}, function() { 
    $(this).not('.active, .invisible').find('.overlay').fadeOut(300); 
}); 

私のcss

.overlay 
{ 
    top: 0; 
    left: 0; 
    width: 134px; 
    height: 134px; 
    z-index: 2; 
    position:relative; 
    background: url(../img/overlay.png) repeat; 
} 

Answer 1

私はあなたが持っている推測している：

.live-box-outer { 
    position: relative; 
} 
.long-span { 
    z-index: 1; 
} 

あなたがして欲しいoverlayとlong-spanにするためにありますどちらもlive-box-outerの左上に配置してください。

.overlay, .long-span { 
    top: 0; 
    left: 0; 
    position:absolute; 
} 

はその後でoverlayフェードがlong-spanをカバーするときに、2つのように変更してみてください。もう1つの選択肢は、long-spanをフェード/隠すと同時に、overlayをフェード/表示することです。