什么是更好的选择，而不是使用jQuery的.is（'：hover'）来悬停在另一个div上时显示div。

What is another or better option to use instead of jQuery’s .is(‘:hover’) to show a div when hovering over another div.

什么是另一个或更好的选项,而不是jQuery的.is(':hover')在悬停在另一个div上时显示div。

I have a global nav with a search icon (li#search-open) at the far right, last item. when mousing over (hovering) i want a div containing the search form (#search-container) located directly beneath the global nav to none to slide down.

我有一个全球导航,在最右边的最后一个项目上有一个搜索图标(li#search-open)。当鼠标悬停(悬停)时,我想要一个包含直接位于全局导航下方的搜索表单(#search-container)的div,以便向下滑动。

http://thetownie.com/nav/index.html

I have not gotten satisfactory results. So far mainly relying on jQuery’s .is(‘:hover’) function and also using a window.setInterval function to continually check if user is hovering over either the #search-open or the #search-container. It is working intermittently.

我没有得到满意的结果。到目前为止,主要依赖于jQuery的.is(':hover')函数,并使用window.setInterval函数来持续检查用户是否悬停在#search-open或#search-container上。它间歇性地工作。

What is a better way to do this? Can this be done w/ CSS only?

有什么更好的方法呢?这可以用CSS完成吗?

note the CNN global nav does the same as what i am trying to achieve here. for example try mousing over ‘US’, ‘World’ or ‘Politics’

请注意CNN全球导航与我在这里尝试实现的相同。例如,试着将鼠标放在“美国”,“世界”或“政治”上

www.cnn.com

any help would be so appreciated. my code is below

任何帮助都会如此受到赞赏。我的代码如下

<nav>
 <div id="main-nav-wrapper">
  <div id="main-nav-inner-wrapper">
   <ul id="six-items">
    <li class="a"><a href="#">Item 1</a></li>
    <li class="a"><a href="#">Item 2</a></li>
    <li class="a"><a href="#">Item 3</a></li>
    <li class="b"><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li id="search-open"><a href="#" class="flaticon-magnifier13"></a></li>
    </ul>
<div id="search-container" class="closed">
 <form>
  <input type="text" placeholder="enter search terms here...." id="search-input"/>
  <input type="submit" value="search" />
 </form>
 </div>         
 </div><!-- end nav inner wrapper -->
 </div></div></nav>

my sorry js is here,....

对不起js在这里,....

var searchcontainerhover = false;
var searchopenhover ;

function slideSearchUp(){
  jQuery('#search-container').slideUp('fast');  
 }

 function testIfHover(){
  if(jQuery('#search-container').is(':hover')) {
 searchcontainerhover = true;
 } else {
 searchcontainerhover = false;
}

if(jQuery('#search-open').is(':hover')) {
 searchopenhover = true;
} else {
 searchopenhover = false;
}

console.log(searchcontainerhover);
console.log(searchopenhover);

if((searchcontainerhover == false) && (searchopenhover == false)) {
setTimeout(slideSearchUp, 3000); 
 } 
}  
window.setInterval(testIfHover, 1000);

jQuery('#search-open').mouseenter(
  function(){
   jQuery('#search-container').slideDown('fast');
   jQuery( "#search-container").removeClass( "closed" ).addClass( "open" );
 searchopen = true;
 console.log(searchopen);
});

2 个解决方案

#1

I would solve this by adding a mouseleave handler to both the button and the search container as well as a mouseenter on the search container.

我将通过向按钮和搜索容器以及搜索容器上的mouseenter添加mouseleave处理程序来解决此问题。

function slideSearchUp(){
  jQuery('#search-container').slideUp('fast');  
}
var searchContainerTimeout;

jQuery('#search-open').mouseenter(function(){
   jQuery('#search-container').slideDown('fast');
   jQuery( "#search-container").removeClass( "closed" ).addClass( "open" );
});
jQuery('#search-open,#search-container').mouseleave(function(){
   searchContainerTimeout = setTimeout(slideSearchUp,3000);
})
$('#search-container').mouseenter(function(){
   clearTimeout(searchContainerTimeout);
   searchContainerTimeout = setTimeout(slideSearchUp,3000);
});

Now what will happen is when the mouse enters search-open, search-container will slide open. When the mouse leaves search-open, a timeout will start that will close search-container after three seconds. If the mouse the enters search-container or re-enters search-open, the timeout will be stopped. If the mouse leaves search-container, it will be started again.

现在将会发生什么,当鼠标进入搜索打开状态时,搜索容器将滑动打开。当鼠标离开搜索打开时,将开始超时,这将在三秒后关闭搜索容器。如果鼠标进入搜索容器或重新进入搜索打开状态,则超时将停止。如果鼠标离开搜索容器,它将再次启动。

#2

this Demo might helpfull to you, you extend this with animations etc.

这个演示可能对你有所帮助,你可以用动画等扩展它。

  
  
 $(document).ready(function(){
		
		$("#search").mouseenter(function(){

			$("#searchdiv").show();
			$(document).bind("mousemove", mousemove);

		});

		function mousemove(e){
	   
			if(!$(e.target).hasClass("search")){
				$(document).unbind("mousemove", mousemove);
				$("#searchdiv").hide();
			}  
		}
		
	});

span{      
  border: 1px solid blue;
}


.search{
  border: 1px solid red;
  cursor:pointer;
}

#searchdiv{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>One</span><span>Two</span><span>Three</span><span>Four</span><span id="search" class="right search">Search</span>

<div id="searchdiv" class="search">Search Div</div>

#1