鼠标悬停在任一选择器上以显示div

Question

我正在制作一个2级菜单。第一级宽度最大为500px。我想使第二级全宽，所以我使用jquery将列表克隆到另一个div。但是，现在我无法在鼠标悬停时让其他div保持显示。

您可以在http://jsfiddle.net/framelita/6k16dmee/5/

看到jsfiddle

我尝试在鼠标离开中添加悬停，这样当它离开第一个菜单时，它会一直显示但不起作用。

    $(".nav li a").on({
        mouseenter: function () {
            $(this).siblings("ul").clone().appendTo("#secondary-menu");
            $(this).addClass("active");
        },
        mouseleave: function () {
            $('.nav li a, #secondary-menu').hover(function(){  
                $('#secondary-menu').addClass("show");  
            },     
            function(){    
                $('#secondary-menu').html("");
                $('.nav li a').removeClass("active");
            });
        }
    });

---

在使用Arun的建议之后，我还希望在我的seconary菜单上保持列表悬停效果。但是，当我从二级菜单中鼠标移动时，悬停效果才会消失。

如果我向上移动指针，悬停的效果仍然存在。

javascript：

var $target = $('#secondary-menu');
$('.nav li a').hover(function () {
    var $this = $(this);
    clearTimeout($target.data('hoverTimer'));
    $target.html($(this).siblings('ul').clone());
    $this.addClass('hovered');
}, function () {
    var timer = setTimeout(function () {
        $target.html('');
        $this.removeClass('hovered');
    }, 10);
    $target.data('hoverTimer', timer);
});

$target.hover(function () {
    clearTimeout($(this).data('hoverTimer'));
}, function () {
    $(this).html('');
    $('.nav li a.hovered').removeClass('hovered');
});

我还添加了css：

.nav a.hovered {
    background: #2299b3;
    color: #FFFFFF;
}

您可以在以下位置查看： http://jsfiddle.net/framelita/dmsgjwfg/

有没有什么方法可以随时保留在悬停效果的列表中？

Answer 1

问题是二级菜单位于nav li a元素

之外

＆＃13;

＆＃13;

$(document).ready(function() {
  menuHover();
});
var menuHover = function() {
  var $target = $('#secondary-menu');
  $('.nav li a').hover(function() {
    clearTimeout($target.data('hoverTimer'));
    $target.html($(this).siblings('ul').clone());
  }, function() {
    var $this = $(this);
    var timer = setTimeout(function() {
      $target.html('');
      $this.removeClass('active');
    }, 200);
    $target.data('hoverTimer', timer);
  });

  $target.hover(function() {
    clearTimeout($(this).data('hoverTimer'));
  }, function() {
    $(this).html('');
    $('.nav li a.active').removeClass('actvie')
  });

}

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-family: CenturyGothic, Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  line-height: 1.5;
}
html,
body {
  width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
  outline: none;
}
.container {
  width: 600px;
  padding: 0;
  margin: auto;
  max-width: 1200px;
  position: relative;
}
header {
  background: #eeeeee;
  padding: 10px 0;
  border-bottom: #2299b3 3px solid;
  z-index: 99;
  position: relative;
  text-transform: uppercase;
  font-size: 13px;
}
.header > img {
  margin-left: 15px;
  width: 50px;
}
nav {
  width: 100%;
  max-width: 500px;
}
.nav {
  list-style: none;
  position: absolute;
  z-index: 99;
  width: auto;
  top: 28px;
  border-bottom: 0;
  right: 0;
}
.nav:before,
.nav:after {
  content: " ";
  display: table;
}
.nav:after {
  clear: both;
}
.nav a {
  padding: 10px;
  color: #006980;
}
.nav a:hover {
  background: #2299b3;
  color: #FFFFFF;
}
.nav li {
  position: relative;
}
.nav > li {
  float: none;
  border-top: 1px solid #B9B9B9;
}
.nav > li > a {
  display: block;
}
.nav > li.hover > ul {
  left: 0;
}
.nav > li ul {
  display: none;
}
.nav > li {
  float: left;
  border-top: 0;
}
.nav a.active {
  background: #2299b3;
  color: #FFFFFF;
}
#secondary-menu {
  width: 100%;
  position: absolute;
  top: 75px;
  background: #2299b3;
}
#secondary-menu ul {
  padding: 4px 0;
  list-style: none;
  text-align: center;
}
#secondary-menu ul li {
  display: inline-block;
  padding: 5px;
}
#secondary-menu ul li a {
  color: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class="container header">
    <img src="http://framelita.com/wp-content/uploads/2014/05/logo.png" />
    <nav id="droplinetabs1">
      <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a>
          <ul class="sec-menu">
            <li><a href="">Team 1</a></li>
            <li><a href="">Team 2</a></li>
            <li><a href="">Team 3</a></li>
          </ul>
        </li>
        <li><a href="">Gallery</a>
          <ul class="sec-menu">
            <li><a href="">Videos</a></li>
            <li><a href="">Photo Gallery</a></li>
          </ul>
        </li>
        <li><a href="">News & Events</a>

          <ul class="sec-menu">
            <li><a href="">Latest News</a></li>
            <li><a href="">Milestones</a></li>
          </ul>
        </li>
        <li><a href="">Contact Us</a></li>
      </ul>
    </nav>
  </div>
  <div id="secondary-menu"></div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

要使辅助导航保持鼠标悬停（或hover），请尝试将这些更改添加到您的代码中。

<强> CSS

/* add this to your stylesheet */
.nav > li:hover
{
    border-bottom: 20px solid transparent;
}

<强>的JavaScript

$(document).ready(function() {
    menuHover();
});
var menuHover = function () {
    // changed the selector from a to li
    $('.nav li').on({ 
        mouseenter: function () {
            // moved this statement from mouseleave to mouseenter
            $('#secondary-menu').html('');
            $(this).find('ul').clone().appendTo('#secondary-menu');
            $(this).addClass('active');
        },
        mouseleave: function () {
            $(this).removeClass('active');
        }
    });
}