2015-06-21 142 views
0

我有我类似这样的标记:在鼠标悬停后打开div并保持打开状态,直到鼠标移出?

<div class="wrapper-header"> 
<div class="container"> 
<div class="navbar"> 
<ul class="nav navbar-nav"> 
<li class=""><a href="#" class="toggle">Show Categories</a></li> 
</ul> 
</div> 
</div> 

<div class="wrapper-categories"> 
<div class="container"> 
Content Here 
</div> 
</div> 

.wrapper-categoriesdisplay: none;默认情况下,所以这只能说明曾经与点击:

$(".toggle").on('click', function (event){ 
       event.preventDefault(); 
       $(".wrapper-categories").slideToggle("fast"); 
       $(this).html(function(i,html) { 
        if (html.indexOf('Browse') != -1){ 
         html = html.replace('Show','Hide'); 
        } else { 
         html = html.replace('Hide','Show'); 
        } 
        return html; 
       }); 
      }); 

现在,我想改变这种状况,以显示对hover而不是click,而.wrapper-categories保持打开状态,如果有人将鼠标移过来并关闭,如果它不在链接或内容div上。

我试图更换它改为$(".toggle").hover(function() {和那工作,但它不保持打开。我还要做什么?

+0

你能给小提琴吗? – Varun

+0

不久后会发布,是:) – user1227914

回答

0

您的代码无法按照您的要求操作,因为.toggle的悬停事件仅适用于其自身。只要您尝试将鼠标光标移动到其内容即即.wrapper-categories之下,光标就会退出.toggle范围。

下面是您需要如何实现这个的工作示例。您需要使用简单结构ulli稍微更改要创建的菜单结构。

这里是FIDDLE

HTML

<ul class="nav navbar-nav"> 
<li class="menu"><a href="#" class="toggle">Show Categories</a> 
    <ul> 
     <li> 
      Content Here 
     </li> 
     <li> 
      Content Here 
     </li> 
     <li> 
      Content Here 
     </li> 

    </ul> 
</li> 
</ul> 

JS

$(".menu").mouseover(function(){ 
    $(this).find('ul').css('visibility', 'visible');  
}); 
$(".menu").mouseout(function(){ 
    $(this).find('ul').css('visibility', 'hidden'); 
}); 

CSS

.menu > ul{ 
    visibility:hidden; 
} 
.menu > ul > li:hover{ 
    font-weight:bold; 
} 
+0

谢谢你的回答。这是有道理的,但不幸的是,由于网站的结构,我不能移动它的两个单独的包装或内容。他们必须保持独立的包装。 – user1227914

+0

好的。那么我想只有onClick才有可能。祝你好运, –

0

这里是你的问题的解决方案。 https://jsfiddle.net/44wrL4g4/2/

我把所有的东西都包装在menu类中。

而且我已经使用mouseleave()而不是mouseout()。有关这些功能,请参阅Jquery文档。

请参阅代码以获得进一步的理解。

相关问题