Jquery悬停功能显示和隐藏元素
Jquery hover function show and hide element
>我有一个悬停功能,可以显示和隐藏我的子菜单,直到有人将鼠标悬停在子菜单上。
问题是,当我尝试将鼠标向下移动到显示它再次消失的菜单时。
谁能指出我在这里做错了什么。?
$(document).ready(function() {
$('.menu-Link > a').hover(function() {
$(this).next('.menu').show();
}, function() {
$(this).next('.menu').hide();
});
});
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
/*background-color: #333333;*/
background-color: transparent;
transition: 0.2s;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
display: inline-block;
}
nav ul li {
float: left;
}
nav ul li a.link {
display: block;
color: black;
text-align: center;
padding: 24px 16px;
text-decoration: none;
transition: 0.2s;
font-weight: bold;
text-transform: uppercase;
position: relative;
}
nav ul li div.arrow-down {
float: right;
width: 0;
height: 0;
margin-left: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
margin-top: 10px;
transition: 0.2s;
}
nav ul li div.menu {
display: none;
z-index: 999;
position: relative;
background-color: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
padding: 15px 0;
margin-top: -15px;
}
nav ul li div.menu a {
color: #333333;
padding-left: 15px;
}
nav ul li a.link:hover {
color: #808080;
text-decoration: none;
transition: 0.2s;
}
nav ul li a.link:hover div.arrow-down {
border-top: 5px solid #808080;
transition: 0.2s;
}
nav ul li:first-child {
padding-left: 100px;
}
nav ul.right {
float: right;
}
nav ul.right li:last-child {
padding-right: 100px;
}
nav.color {
background-color: #333333;
transition: 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="left">
<li class="menu-Link">
<a href="" class="link">Home</a>
<div class="menu">
<a href="">subcat.Title</a>
</div>
</li>
<li class="menu-Link">
<a href="" class="link">Test</a>
<div class="menu">
<a href="">subcat.Title</a>
</div>
</li>
</ul>
<ul class="right">
<li><a href="/">Basket</a>
</li>
</ul>
</nav>
问题是因为事件附加到a
元素,因此当用户尝试将鼠标悬停在出现的菜单上时,悬停的mouseout
部分在该a
上被调用,JS代码尝试再次隐藏菜单。若要解决此问题,请将 hover()
事件附加到同时保存a
和菜单的元素。在本例中,.menu-link
元素本身。您还需要将next()
更改为find()
以适应更改。试试这个:
$(document).ready(function() {
$('.menu-Link').hover(function() {
$(this).find('.menu').show();
}, function() {
$(this).find('.menu').hide();
});
});
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
/*background-color: #333333;*/
background-color: transparent;
transition: 0.2s;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
display: inline-block;
}
nav ul li {
float: left;
}
nav ul li a.link {
display: block;
color: black;
text-align: center;
padding: 24px 16px;
text-decoration: none;
transition: 0.2s;
font-weight: bold;
text-transform: uppercase;
position: relative;
}
nav ul li div.arrow-down {
float: right;
width: 0;
height: 0;
margin-left: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
margin-top: 10px;
transition: 0.2s;
}
nav ul li div.menu {
display: none;
z-index: 999;
position: relative;
background-color: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
padding: 15px 0;
margin-top: -15px;
}
nav ul li div.menu a {
color: #333333;
padding-left: 15px;
}
nav ul li a.link:hover {
color: #808080;
text-decoration: none;
transition: 0.2s;
}
nav ul li a.link:hover div.arrow-down {
border-top: 5px solid #808080;
transition: 0.2s;
}
nav ul li:first-child {
padding-left: 100px;
}
nav ul.right {
float: right;
}
nav ul.right li:last-child {
padding-right: 100px;
}
nav.color {
background-color: #333333;
transition: 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="left">
<li class="menu-Link">
<a href="" class="link">Home</a>
<div class="menu">
<a href="">subcat.Title</a>
</div>
</li>
<li class="menu-Link">
<a href="" class="link">Test</a>
<div class="menu">
<a href="">subcat.Title</a>
</div>
</li>
</ul>
<ul class="right">
<li><a href="/">Basket</a>
</li>
</ul>
</nav>
另请注意,您可以单独在 CSS 中实现这一点,而无需任何 JS 代码,只需删除 hover()
处理程序并将此行添加到您的 CSS 中:
nav ul li:hover div.menu {
display: block;
}
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 随时隐藏元素
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 隐藏元素直到加载完成(ng斗篷不是我需要的)
- 在具有类的元素中隐藏元素
- javascript()onclick隐藏元素-dos'我不在firefox工作
- JQueryHide()在按钮中使用元素时不会隐藏元素
- 使用Javascript取消隐藏元素
- 如果鼠标离开父对象,则隐藏元素
- 如何在jquery ajax成功html响应中找到输入隐藏元素
- 基于事件在循环中隐藏元素
- 渐进式增强-不使用CSS隐藏元素
- 隐藏元素后更新滚动条
- jQuery没有隐藏元素
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何使用javascript在区域外单击时隐藏元素
- 如何在加载网页时隐藏元素
- JS:隐藏元素上的事件侦听器
- HTML 显示/隐藏元素 JS 不起作用