当鼠标悬停在另一个 div 上时，有什么更好的选择来代替 jQuery 的 .is(':hover') 来显示 div。

Question

当鼠标悬停在另一个 div 上时，有什么可以代替 jQuery 的 .is(':hover') 显示 div 的另一个或更好的选择。

我有一个全局导航，在最右边的最后一项有一个搜索图标 (li#search-open)。当鼠标悬停（悬停）时，我想要一个 div 包含位于全局导航正下方的搜索表单（#search-container）到 none 向下滑动。

我没有得到满意的结果。到目前为止，主要依靠 jQuery 的 .is(':hover') 函数并使用 window.setInterval 函数来持续检查用户是否将鼠标悬停在 #search-open 或 #search-容器。它正在间歇性工作。

执行此操作的更好方法是什么？这可以只用 CSS 完成吗？

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

www.cnn.com

如有任何帮助，我们将不胜感激。我的代码如下

<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>

我很抱歉 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);
});

Answer 1

我会通过向按钮和搜索容器添加一个 mouseleave 处理程序以及在搜索容器上添加一个 mouseenter 来解决这个问题。

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);
});

现在会发生的事情是当鼠标进入search-open时，search-container会滑动打开。当鼠标离开 search-open 时，将开始超时并在三秒后关闭 search-container。如果鼠标输入search-container或重新输入search-open，超时将停止。如果鼠标离开search-container，它会重新开始。

Answer 2

这个Demo可能对你有帮助，你可以用动画等扩展它

  
  
 $(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>

当鼠标悬停在另一个 div 上时，有什么更好的选择来代替 jQuery 的 .is(':hover') 来显示 div。

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

javascript

css

jquery

hover