●スクリプト
<script type="text/javascript">
$(function(){
$("div.c_kantou").mouseover(function(){
$("div#i_kantou:not(:animated)").show("normal");
})
$("div.c_kantou").mouseout(function(){
$("div#i_kantou:not(:animated)").hide("normal");
})
$("div.c_kansai").mouseover(function(){
$("div#i_kansai:not(:animated)").show("normal");
})
$("div.c_kansai").mouseleave(function(){
$("div#i_kansai:not(:animated)").hide("normal");
})
});
</script>
●HTML
<div class="c_kantou">
関東
<div id="i_kantou" style="display: none;">
<a class="c_tokyo" href="#">東京</a>
<a class="c_kanagawa" href="#">神奈川</a>
<a class="c_saitama" href="#">埼玉</a>
</div><!-- end of i_kantou -->
</div><!-- end of c_kantou -->
<div class="c_kansai">
関西
<div id="i_kansai" style="display: none;">
<a class="c_osaka" href="#">大阪</a>
<a class="c_kyoto" href="#">京都</a>
<a class="c_wakayama" href="#">和歌山</a>
</div><!-- end of i_kansai -->
</div><!-- end of c_kansai -->
●CSS
.c_kantou{
background-color:lightskyblue;
border: 0px solid #FF0000;
width:200px;
float:left;
}
.c_tokyo{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:lightgreen;
}
.c_kanagawa{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:springgreen;
}
.c_saitama{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:greenyellow;
}
.c_kansai{
background-color:sandybrown;
border: 0px solid #FF0000;
width:200px;
float:left;
}
.c_osaka{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:tomato;
}
.c_kyoto{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:plum;
}
.c_wakayama{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:hotpink;
}
●解説
関東のメニュー表示後、サブメニューの項目（東京や神奈川など）を選択しようとすると、
サブメニューが消えてしまう。これはmouseoutが子要素に効いてしまうからである。
一方、関西は、mouseout ではなく mouseleave を使っている。
mouseleaveは子要素には効かない。よって、大阪や京都などにマウスカーソルを乗せても
サブメニューが消えることは無い。
ちなみにnot(:animated)は、アニメーションが連続して止まらなくなる現象を防ぐ処理である。
サンプルソース
ブロマガ会員ならもっと楽しめる！
- 会員限定の新着記事が読み放題！※1
- 動画や生放送などの追加コンテンツが見放題！※2
-
- ※1、入会月以降の記事が対象になります。
- ※2、チャンネルによって、見放題になるコンテンツは異なります。
東京ウェブ制作ブロマガ
大和賢一郎
月額：￥550 (税込)
コメント
コメントはまだありません
コメントを書き込むにはログインしてください。
