jQueryのホバーでクラスを付けるとき

Question

「#test」にホバーしたときにメニューのリストを表示したいのですが、メニューのリストをクリックしようとすると「#test」からのホバーが外れてしまうために、メニューリストがクリックできません。

どのように解決すべきでしょうか？

<header>
  <div id="test">test</div>
</header>

<ul id="menu">
  <li>メニュー１</li>
  <li>メニュー２</li>
</ul>

<style>
#menu {
  display: none;
}
#menu.hover {
  display: block;
}
</style>

<script>
// これではメニューの中身にホバーしたときに「.hover」が外れてしまい、中身がクリックできない
$('#test').hover( 
  function(){$('#menu').addClass('hover');},  
  function(){$('#menu').removeClass('hover');}
);
</sctip>

Comments

[kei344]

ilではなくliですよ。

[5656shitai]

ありがとうございます。

Answer 1

こうすればよいです。

<header>
  <div id="test">test
    <ul id="menu">
      <il>メニュー１</il>
      <il>メニュー２</il>
    </ul>
  </div>
</header>
```**動くサンプル：**[https://jsfiddle.net/pcoshwr2/](https://jsfiddle.net/pcoshwr2/)

Comments

[5656shitai]

きゃーー！お恥ずかしいです！中に入れれば一緒ですもんね！ありがとうございます。