締切済み

mouseoverのコンテンツ内でselectタグ

2015/02/20 18:35

jQueryでマウスオーバーで、あるコンテンツを表示する仕組みを作って、そのコンテンツ内にプルダウンを表示したいのですが、 <option>の選択肢にカーソルを合わせると、コンテンツが閉じてしまい、困っています。（メガメニュー？のようなイメージです。IEとFireFoxで検証しています。） ↓のようなソースを書いているのですが、どこがいけないのでしょうか。。 --------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //一旦非表示 $('#cont').hide(); //ここから表示設定 $('#hoge').mouseover(function(){ $('#cont').show(); }).mouseout(function(){ $('#cont').hide(); }); }); </script> <style type="text/css"> #hoge {margin:0; padding:0;} #cont {padding:100px; position:absolute; background-color: rgba(0, 0, 0, 0.5);} </style> </head> <body> <ul> <li id="hoge"> <a >hoge</a> <div id="cont"> <form method="get"> <select> <option value="">選択してください</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> <input type="button" value="検索" /> </form> </div> </li> <li>…</li> <li>…</li> </ul> </body> </html> --------------------- わかる方いらっしゃいましたら、ヒントいただけると嬉しいです。。よろしくお願いいたしますm(__)m