Question

我有一个自定义标题/导航，其中有两个元素代表网站的两个部分。我希望能够将鼠标悬停在其中一个元素上并显示特定菜单。但是菜单列表不是元素的子元素。所以我不能用CSS做到这一点。

我遇到的问题是当我将鼠标悬停在元素上时，菜单会显示。但我移动鼠标将鼠标悬停在菜单上，一旦离开元素，菜单就会消失。我尝试使用display:block方法在manu项目中添加.delay()，但在将鼠标移离div时仍然有轻微的闪烁。

这是我目前的代码：

// HTML

<header>

    <a class='hoverOverOne'>Hover over me to show menu</a>
    <a class='hoverOverTwo'>Hover over me to show menu</a>

    <nav>

<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>

</ul>

<ul id='menuToShow-Two'>
    <li>testing</li>
    <li>testing</li>
</ul>

</nav>
</header>

// jQuery

jQuery("a.hoverOverOne").hover(
      function () {
         jQuery('#menuToShow-One').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-One').slideUp('medium').delay(500);
    });

    jQuery("a.country").hover(
      function () {
         jQuery('#menuToShow-Two').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-Two').slideUp('medium').delay(500);
    });

// CSS

#menuToShow-One{
display:none;
}

#menuToShow-Two{
display:none;
}

非常感谢任何帮助。

感谢。

Answer 1

＆＃13;

$(function(){
	$("a.hoverOverOne, a.hoverOverTwo").hover(function () {
		var menu = '#menu'+this.id;
        $('.menu').not(menu).slideUp(0);
        $(menu).slideDown('medium');
    });
	$("ul.menu").mouseleave(function () {
		$(this).slideUp('medium');
    });
});

＆＃13;

a.hoverOverOne{
  margin-right: 20px;
}
#menuToShow-One{
  display:none;
}
#menuToShow-Two{
  display:none;
}
nav{
  display:inline-block;
}
ul li{
  display:block;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header>
	<a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a>
	<a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br />
	<nav>
		<ul id='menuToShow-One' class="menu">
			<li>testing menu 1</li>
			<li>testing menu 1</li>
		</ul>
		<ul id='menuToShow-Two' class="menu">
			<li>testing menu 2</li>
			<li>testing menu 2</li>
		</ul>
	</nav>
</header>

＆＃13;

Answer 2

检查以下解决方案。 JS无需为此提供动力。

#hover-one:hover ~ nav ul#menuToShow-One,
#hover-two:hover ~ nav ul#menuToShow-Two {
  max-height: 500px;
  transition: 0.2s;
}

#menuToShow-One,
#menuToShow-Two {
  max-height: 0;
  transition: 0.2s;
  transition-delay: 1s;
  overflow: hidden;
}

nav:hover #menuToShow-One,
nav:hover #menuToShow-Two {
  max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>

  <a id="hover-one" href='#hoverOverOne'>Hover over me to show menu</a>
  <a id="hover-two" href='#hoverOverTwo'>Hover over me to show menu</a>

  <nav>

    <ul id='menuToShow-One'>
      <li>testing 1</li>
      <li>testing 1</li>

    </ul>

    <ul id='menuToShow-Two'>
      <li>testing 2</li>
      <li>testing 2</li>
    </ul>

  </nav>
</header>

将鼠标悬停在UL时保持UL可见

2 个答案: