1

現在、メニューからその下の div を開く jQuery が少しあります。うまく機能しますが、ドロップダウンではなく追加のメニューです。

マウスがそのdiv内にある場合、div 'quickCourse'を開いたままにしたい。

したがって、マウスがli:nth-of-type(6)またはquickCourse divの上にない場合にのみ、divを閉じる必要があります。どんな助けや指示も大歓迎です。

私はそれがmouseOverに関係していると感じていますが、少し確信が持てませんか? - 私がこれまでに持っているものの JSfiddle は、ここで入手できます。

http://jsfiddle.net/owenoneill/REyRg/11/

<script type="text/javascript">
            $(document).ready(function () {
             $(".header ul.menu > li:nth-of-type(6) ").hover(
                function () {
                    $("div.quickCourse").fadeIn();
                },
                function () {
                    $("div.quickCourse").fadeOut();
                }
            );
            });
            </script>
4

1 に答える 1

3 

$(document).ready(function() {
  $(".header ul.menu > li:nth-of-type(6)").mouseover(function() {
    $("div.quickCourse").fadeIn();
  });

  $(".header ul.menu > li:nth-of-type(6), div.quickCourse").mouseleave(function() {
    $("div.quickCourse").fadeOut();
  });
  $("div.quickCourse").mouseover(function() {
    $(this).stop(true, true).show();
  });
});
.header ul.menu {
  float: left;
  list-style-type: none;
}

.header ul.menu li {
  float: left;
  padding: 10px;
}

.quickCourse {
  position: absolute;
  margin: 80px 0px 0px 0px;
  width: 300px;
  height: 30px;
  background: #000;
  display: none;
  color: #FFF;
  padding: 50px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <ul class="menu">
    <li>TEST 1</li>
    <li>TEST 2</li>
    <li>TEST 3</li>
    <li>TEST 4</li>
    <li>TEST 5</li>
    <li>TEST 6</li>
  </ul>
</div>
<div class="quickCourse">HULLO!</div>

于 2013-06-29T18:02:18.290 に答える