在鼠标悬停后打开div并保持打开状态,直到鼠标移出?
我有我类似这样的标记:在鼠标悬停后打开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-categories
是display: 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() {
和那工作,但它不保持打开。我还要做什么?
您的代码无法按照您的要求操作,因为.toggle
的悬停事件仅适用于其自身。只要您尝试将鼠标光标移动到其内容即即.wrapper-categories
之下,光标就会退出.toggle范围。
下面是您需要如何实现这个的工作示例。您需要使用简单结构ul和li稍微更改要创建的菜单结构。
这里是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;
}
谢谢你的回答。这是有道理的,但不幸的是,由于网站的结构,我不能移动它的两个单独的包装或内容。他们必须保持独立的包装。 – user1227914
好的。那么我想只有onClick才有可能。祝你好运, –
这里是你的问题的解决方案。 https://jsfiddle.net/44wrL4g4/2/
我把所有的东西都包装在menu
类中。
而且我已经使用mouseleave()
而不是mouseout()
。有关这些功能,请参阅Jquery文档。
请参阅代码以获得进一步的理解。
你能给小提琴吗? – Varun
不久后会发布,是:) – user1227914