onMouseoutの有効な範囲
初期状態:aaaという文字のみ表示
動作:aaaをクリックするとその下にbbb,cccというリンクが現れ、これら(aaa,bbb,cccの領域)からマウスアウトしたら、bbb,cccが消える
というものを作る為に、以下のコードを書いてみました。
<div onMouseout="this.childNodes[1].style.display='none'"><p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p><ul style="display:none;"><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div>
「ブラウザによりノードのカウント方法が異なり挙動が変わる」のを防ぐために改行をなくしましたが、見やすくするとこうなります↓
<div onMouseout="this.childNodes[1].style.display='none'">
<p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p>
<ul style="display:none;">
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
</div>
これを実際に試してみると、aaaを押してリンクbbb,cccが出てきたのは良いものの、
リンクをクリックするためにマウスをbbb,cccへ移動しようとすると、
aaaから離れた時点でbbb,cccが消えてしまいます。
「div全体に」”マウスアウトしたらbbb,cccが消える”というつもりで上記のソースを書いたのですが、
divのonMouseoutはpからマウスアウトしても働いてしまうのでしょうか。
どのように修正したらよいか試行錯誤中です。
解決策があれば、どうぞよろしくお願いします。
お礼
皆さん、お礼が遅くなり申し訳ありません。 今回は一括でお礼させて頂きます、ありがとうございます。 皆さんの意見を参考に実行しようと思います。