●スクリプト
<script type="text/javascript"><!--

function syori1(tgt){
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}

function syori2(tgt){
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}

function syori3(tgt){// サブメニューからポインタが離れた時の処理
if (document.getElementById){
setTimeout('document.getElementById("' + tgt + '").style.display="none"',500); // 0.5秒後に隠す
}
}

function syori4(tgt){// サブメニューからポインタが離れた時の処理
if (document.getElementById){
setTimeout('document.getElementById("' + tgt + '").style.display=""',500); // 0.5秒後に表示させる
}
}

//--></script>


●HTML
<span onMouseover="syori1('tokyo')">処理１</span>　
<span onMouseover="syori2('tokyo')">処理２</span>　
<span onMouseover="syori3('tokyo')">処理３</span>
<span onMouseover="syori4('tokyo')">処理４</span>

<h1 id="tokyo" style="display: none;">東京</h1>

●解説
まず、初期状態では、東京の文字は表示されていない。
処理１　にマウスカーソルを乗せると、東京の文字が表示される。
その状態で、処理２　にマウスカーソルを乗せると、東京の文字が消える。

処理３も、東京の表示を消す処理だが、0.5秒後に消す、というように遅らせている。
処理１で表示させた状態から、処理２と処理３で、消え方を比較してみるとよい。
処理２はマウスカーソルを乗せた瞬間に消えるが、処理３は0.5秒後に消える。

なお、処理４は、0.5秒後に表示させる処理である。

以上のように、文字列の表示・非表示は、setTimeout を使っても実現できる。

サンプルソース
http://tokyo-webs.jp/sample_source/130326d/

東京ウェブ制作