jQueryのmouseoutについての質問です。

質問

jQueryの質問です。
dtにマウスを合わせた時にddが表示し、dlの領域以外にマウスが外れるとdd

が非表示させるような設定をしたいのですがうまくいきません。
子要素のddとかdtとかaに合わさるとすぐに非表示になってしまいます。
dl内は、どこを移動しても非表示にならずdl要素以外の箇所にマウスが合わ

さった時に非表示になってほしいのですが
どなたかアドバイスいただけないでしょうか？

自分なりにはこのように記述してみました。

■jQueryの記述

$(function(){
$("dt").mouseover(function(){

$("dd:not(:animated)").slideDown("slow");
});
$("dl").mouseout(function(){
$("dd:not(:animated)").slideUp("slow");
});
});

■CSSの記述
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
あああ<a href="#">ああああ</a>あああああああ

ああああああああああああああああああああああああああああああああああ

あああああああああああああ<a href="#">ああああ</a>あああああ<a

href="#">ああ</a>あああああ </dd>
</dl>
デモURL：
http://tegarude.web.fc2.com/faq/test.html

回答No.1

kosukejlampnet

$(function(){
$("dl").hover(
function(){
$(this).children("dd").slideUp("slow");
},
function(){
$(this).children("dd").slideDown("slow");
}
);
});

補足

そちらの方法ですとうまくいかないですね。
hoverを知らなかったので調べたところ

$(function(){
$("dl").hover(function(){

$("dd:not(:animated)").slideDown("slow");
},function(){
$("dd:not(:animated)").slideUp("slow");
});
});

こういう記述にしたらうまくいきました。ありがとうございます。