jquery - この同じ div で別の div をホバーしたときに div が消えないようにするにはどうすればよいですか?

Question

私はdivを持っています。この div 内に、別の div があります。「親」divにカーソルを合わせると、「親」div内のdivがfadeIn()になります。しかし、「親」div内にdivをホバーすると、このdivは自動的にfadeOut()になりますが、これが発生したくありません。どうすればこの問題を解決できますか?

私は説明が下手なので、フィドルの例を作りました：

http://jsfiddle.net/9kAkY/

HTML

<div id="preview">
    HOVER THIS BIG DIV

    <div id="previewDesc">
        I don't want this div to fadeOut when I hover over it. 
        How can I prevent this from happening?
    </div>
</div>

これは私が使用したjQueryコードです。

   $("#preview").hover(function()
   {
       $("#previewDesc").fadeIn(100);                    
   });

   $("#preview").mouseout(function()
   {
       $("#previewDesc").fadeOut(100);                    
   });

これは私が使用したCSSです

#preview{
    width: 500px;
    height: 200px;
    border: 1px solid #000000;
}

#previewDesc{
    width: 300px;
    padding: 5px;
    background-color: #666666;
    color: #FFFFFF;
    margin: 10px auto;
    display: none;
    border: 2px solid #000000;
}